小编Amy*_*Amy的帖子

jQuery UI工具提示定位问题

我对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 );
    }
  }
 });
});
Run Code Online (Sandbox Code Playgroud)

我可以看到工具提示位于顶部:-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; …
Run Code Online (Sandbox Code Playgroud)

css jquery jquery-ui jquery-ui-tooltip

11
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

jquery ×1

jquery-ui ×1

jquery-ui-tooltip ×1