在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" }}));

小提琴在这里：http://jsfiddle.net/wYM2Q/

将鼠标移到文本“bind qtip to this”上。然后将鼠标悬停在qtip内的图像上。你会看到qtip后面显示的工具提示，我想在它前面显示。

Answer 1

这是因为在元素本身上设置了更高的z索引

DEMOhttp://jsfiddle.net/wYM2Q/2/

你需要相应地改变你的CSS。

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

当CSS被javascript覆盖并且无法通过插件进行更改时，您可能需要使用！重要的。