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/

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

Answer 1

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

DEMO http://jsfiddle.net/wYM2Q/2/

您需要相应地更改CSS。

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

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

在qtip上方显示jQueryUI工具提示

1 个答案: