JqueryUI工具提示出现在其他地方

Question

我有两个单页视图样式，一个“普通视图”另一个“全屏”

在普通视图中，Jquery工具提示正常，如下面的屏幕截图所示

但是，如果我按下“全屏”按钮，然后工具提示不会改变其位置，它仍然会出现在“普通视图”中出现的相同位置。 屏幕截图下方是全屏模式......

以下是我使用的代码：

       <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>

Answer 1

我认为你的toopltip有位置：绝对，这导致它与以前在同一个地方。请尝试将其更改为CSS中的“相对”位置，它应该可以正常工作。