Show jQueryUI tooltip above qtip

Question

I'm trying to show a jQuery UI tooltip on an image in a qtip. Right now, the tooltip is being shown behind the tooltip. Any idea how to get it to show in front of it?

$(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 is here: http://jsfiddle.net/wYM2Q/

Mouse over the text "bind qtip to this". Then mouseover the image within the qtip. You'll see the tooltip showing behind the qtip, and I'd like to show it in front of it.

Answer 1

This is because you have a higher z-index set on the element itself

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

You need to change your CSS accordingly.

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

You may need to use !important when CSS gets overwritten by javascript and it is not possible to change via the plugin.