11

我对 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 有一个关于 connector 的未解决问题，所以我在没有任何定位设置的情况下对其进行了测试，对此没有任何影响。

我已经多次看到这个问题被提及，但由于我没有 qTip 或其他任何内容，所以这无关紧要。

我在这里设置了一个 JS 小提琴。

我将不胜感激任何帮助或建议。

谢谢！

4

2 回答 2

21

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

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

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

另请参阅这个简短的演示。

于 2013-05-30T15:41:57.013 回答
2

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

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px;
}
于 2014-10-22T13:51:19.680 回答