Javascript JqueryUI工具提示显示在其他位置

我有两种单一页面的视图样式，一种是“普通视图”另一种是“全屏视图””

在normal视图中，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>

$（函数（）{
$（“.tooltip”）.tooltip({
职位：{
我的：“中底20”，
在“中心顶端”，
使用：功能（位置、反馈）{
$（this.css（position）；
$( "" )
.addClass（“箭头”）
.addClass（feedback.vertical）
.addClass（feedback.horizontal）
.附于（本）；
}
}
});
});
.ui工具提示，.arrow:之后{
背景：黑色；
边框：2倍纯白；
}
.ui工具提示{
填充：10px 20px；
颜色：白色；
边界半径：20px；
字体：粗体14磅“Calibri”，无衬线；
文本转换：大写；
盒影：0 0 7px黑色；
}
.阿罗{
宽度：70px；
高度：16px；
溢出：隐藏；
位置：绝对位置；
左：50%；
左边距：-35px；
底部：-16px；
}
.箭头{
顶部：-16px；
底部：自动；
}
.左箭头{
左：20%；
}
.阿罗：之后{
内容：“；
位置：绝对位置；
左：20px；
顶部：-20px；
宽度：25px；
高度：25px；
盒影：6px 5px 9px-9px黑色；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变速器：旋转（45度）；
}
.箭头顶部：之后{
底部：-20px；
顶部：自动；
}

我认为您的toopltip具有位置：绝对，这使它与以前处于同一位置。请尝试将其更改为CSS中的“相对”位置，它应该可以工作。

我认为您的toopltip具有position:absolute，这会使它与以前的位置相同。请尝试将它更改为CSS中的“相对”位置，它应该可以工作。

还是同样的问题，我添加了这个CSS，无论我在哪里使用

。tooltiop

都像这样

。但是仍然是同一个问题。仍然是同一个问题，我添加了这个css，无论我在哪里使用
.tooltiop
都像这样
。但还是一样的问题。。