jQuery UI工具提示定位问题

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有一个关于连接器的公开问题,所以我在没有任何定位设置的情况下对它进行了测试,这对此没有任何影响.

我已经看过几次提到这个问题,但由于我没有qTip或其他任何内容,因此没有相关性.

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

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

谢谢!

Answer 1

如果我正确理解你所描述的问题,则会添加垂直滚动条,因为额外的div("#ui-tooltip-XX")会附加到文档的主体上position: relative,这会占用额外的空间来增加主体的scrollHeight属性(并导致滚动条出现).如果这与HTML的其余部分"兼容"(我没有可供测试),您可以通过将工具提示的position属性设置为absolute(这不会影响其容器的整体高度)来避免此问题.

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

(根据您网页上的其他HTML,可能需要进行额外的修改.)

另见这个简短的演示.