Question

with following code qTip works for me and generates tooltips:

$('a.ppname[rel]').live('mouseover', function() {
    $(this).qtip( {
     content : {
      url : $(this).attr('rel')
     },
     position : {
      corner : {
       tooltip : 'leftBottom',
       target : 'rightBottom'
      }
     },
     style : {
      border : {
       width : 5,
       radius : 10
      },
      padding : 10,
      textAlign : 'center',
      tip : true, // Give it a speech bubble tip with
      // automatic corner detection
      name : 'cream' // Style it according to the preset
     // 'cream' style
     }

    });
  });
 });

But the qTip is not removed from the dom, well sometimes it just disappears and appears again and I get a lot of opened tooltips:

I looked at the dom, the qtip seems not to be removed but just set invisible. I need some simple logic to destroy the tooltip. E.g. if a.ppname was focused and is not focused any more I could destroy it. But how would that look like in javascript? Any Ideas?

Update: I downgraded my jQuery to 1.3.2 recommended for qTip. I don’t get tooltips that stay open anymore but there is another problem now:

The tooltips, which for now I can not delete seem to appear when I hover the next item. Please, provide some suggestions how to destroy the tooltip.

Update: using

$('a.ppname[rel]').each(function(){

in the first line of the code the problem is solved. But that leads to another problem another problem that I describe here qTip tooltip does not appear, jQuery. seems to be a dilemma^:D

Answer 1

You can remove the tooltip from the DOM by calling the destroy method when the tooltip is hidden. Try this (kudos to Matt for his example that I copied and ammended):

$('a.ppname[rel]').qtip({
   content : {stuff},
   style : {stuff},
   position: {stuff},
   show: 'mouseover',
   hide: 'mouseout',
   onHide: function() { $(this).qtip('destroy'); }
});