jquery - 在 qtip 上方显示 jQueryUI 工具提示

Question

我正在尝试在 qtip 中的图像上显示 jQuery UI 工具提示。现在，工具提示显示在工具提示后面。知道如何让它显示在它面前吗？

$(document).tooltip({ 
 position: { my: "left bottom-5", at: "left top",
  using: function( position, feedback ) {
   $( this ).css( position );
   $( "<div>" )
   .addClass( "arrow" )
   .addClass( feedback.vertical )
   .addClass( feedback.horizontal )
   .appendTo( this );
  }
 },
 show: false,
 hide: false    
});

var qconfig = {
 show: 'mouseover',
 hide: { when: 'mouseout', fixed: true },
 position: { my: 'bottom center', at: 'top center', adjust: {y: 8} },
 style: { classes: 'qtip-light qtip-shadow' }
};

$("#666").qtip($.extend(true, qconfig, { content: { text: "<img src='http://s.c.lnkd.licdn.com/scds/common/u/images/logos/linkedin/logo_in_nav_44x36.png' title='bind tooltip to this'/>", title: "title is here" }}));

fiddle 在这里:http://jsfiddle.net/wYM2Q/

将鼠标悬停在“将 qtip 绑定(bind)到此”文本上。然后将鼠标悬停在 qtip 中的图像上。您会看到工具提示显示在 qtip 后面，我想将其显示在它前面。

Answer 1

这是因为您在元素本身上设置了更高的 z-index

演示 http://jsfiddle.net/wYM2Q/2/

您需要相应地更改您的 CSS。

#qtip-0 {
    z-index:1;
}

当 CSS 被 javascript 覆盖并且无法通过插件更改时，您可能需要使用 !important。