CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
beginner
beginner

Reputation: 673

JqueryUI tooltip appear elsewhere

i have two view styles of a single page, one "Normal view" another " Full screen"

In normal view the Jquery tools tip appears fine as shown in below screenshot enter image description here

But if i press a "full-screen" button then the tool-tip does not change its position, it still appear in the same position as it was appearing in the "Normal view" . Below screen shot is in Full-screen mode...

enter image description here
Below is the code i used :

       <script>
   $(function() {
     $(".tooltip").tooltip({
       position: {
         my: "center bottom-20",
         at: "center top",
         using: function( position, feedback ) {
           $( this ).css( position );
           $( "<div>" )
             .addClass( "arrow" )
             .addClass( feedback.vertical )
             .addClass( feedback.horizontal )
             .appendTo( this );
         }
       }
     });
   });
   </script>
   <style>
   .ui-tooltip, .arrow:after {
     background: black;
     border: 2px solid white;
   }
   .ui-tooltip {
     padding: 10px 20px;
     color: white;
     border-radius: 20px;
     font: bold 14pt "Calibri", Sans-Serif;  
     text-transform: capitalize;
     box-shadow: 0 0 7px black;
   }
   .arrow {
     width: 70px;
     height: 16px;
     overflow: hidden;
     position: absolute;
     left: 50%;
     margin-left: -35px;
     bottom: -16px;
   }
   .arrow.top {
     top: -16px;
     bottom: auto;
   }
   .arrow.left {
     left: 20%;
   }
   .arrow:after {
     content: "";
     position: absolute;
     left: 20px;
     top: -20px;
     width: 25px;
     height: 25px;
     box-shadow: 6px 5px 9px -9px black;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     tranform: rotate(45deg);
   }
   .arrow.top:after {
     bottom: -20px;
     top: auto;
   }
   </style>

Upvotes: 1

Views: 270

Answers (1)

Manikandan Sigamani
Manikandan Sigamani

Reputation: 1984

I think your toopltip has position:absolute, which causes it to be in the same place as it used to be. Please try changing it to "relative" position in CSS, and it should work.

Upvotes: 1

Related Questions