Question

我对jQuery UI的工具提示存在定位问题。我宁愿不使用jQuery UI，但我正在研究的项目已经在整个过程中使用它并且已经请求我尝试使用它，而不是集成我的首选选项qTip2。

出现工具提示时，会生成垂直滚动条。我将工具提示集中放在目标上方，这是我想要的，不包括这个问题。

$(function() {
$( document ).tooltip({
show: false,
    hide: false,
  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 );
    }
  }
 });
});

我可以看到工具提示位于顶部：-600px我假设是导致滚动条出现的原因。

我已经尝试更改/删除工具提示的位置，但它没有任何效果。我已经尝试删除部分CSS以查明问题，它似乎与填充（任何）或高度（最小，最大或固定）有关。

虽然删除填充和高度修复了问题，但它显然让工具提示看起来有点......瘦。我想弄清楚问题是什么，并解决它，所以我可以设置工具提示的样式。

我当前的CSS（包括我可以看到的高度和填充导致问题）如下（还有为箭头设置的样式，我省略了，因为我可以看到它们没有造成任何问题）：

.ui-tooltip {
    z-index:10;
    width:150px;
    padding:10px;
    min-height:20px;
    max-width:100%;
    font-size:0.875em;
    text-align:center;
    border-radius: 20px;
    color:#707070;
    background:#fffdc2 url(../img/fade.png) repeat-x;
    font-family: 'Droid Sans', sans-serif;
    text-shadow: 1px 1px #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #e1e0aa;}

我知道jQuery UI有an open issue about connectors，所以我在没有任何定位设置的情况下对它进行了测试，这对此没有任何影响。

我已经看过几次提到this issue，但由于我没有qTip或其他任何内容，因此无关紧要。

我已经设置了JS fiddle here。

我很感激任何帮助或建议。

谢谢！

Answer 1

如果我正确理解您所描述的问题，则会添加垂直滚动条，因为额外的div（“＃ui-tooltip-XX”）会附加到文档的正文position: relative，这占用了额外的空间，增加了主体的scrollHeight属性（并导致滚动条出现）。如果这与HTML的其他部分“兼容”（我无法测试），您可以通过将工具提示的position属性设置为absolute来解决此问题（没有贡献其容器的整体高度。

// Add this in your CSS
.ui-tooltip, .arrow:after {
    position: absolute;
    ....

（根据您网页上的其他HTML，可能需要进行额外的修改。）

另请参阅此 short demo 。

Answer 2

对于我的应用程序（在嵌套的jQuery选项卡中的jQuery DataTable中的单元格中有工具提示），仅设置'position：absolute'是不够的 - 我还必须给工具提示一个屏幕顶部和左侧的初始位置，因为它仅在创建后定位：

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px;
}

jQuery UI工具提示定位问题

2 个答案: