1

1 つのページに 2 つの表示スタイルがあり、1 つは「通常表示」 、もう 1 つは「フルスクリーン」です。

通常のビューでは 、下のスクリーンショットに示すように 、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>
4

1 に答える 1

1

ツールチップには position:absolute があり、以前と同じ場所にあると思います。CSS で「相対」位置に変更してみてください。動作するはずです。

于 2013-09-25T20:54:28.473 に答える