how to destroy the tooltip after it"s been used? Created Jun 12, 2009

All you need to do is unbind the events from your inputs.

Say if you called your tooltip like:

  $("#UserAddForm input").tooltip();

You would need to do:

  // unbind focus and mouseover to cover all the bases just
  // incase the tooltip is not being applied to an input
  $("#UserAddForm input").unbind("focus");
  $("#UserAddForm input").unbind("mouseover");

Thanks! It worked :)

No problem :)

And what if you want to recreate it later? Once .unbind is used, it fails to show up afterwards (even when using .tooltip() again).

That doesn't work for me.
To be able to recreate it later, i use (as of version 1.2.5) :

$(selector).tooltip(); //tooltip creation
$(selector).data('tooltip',null); //tooltip destruction

Hope that helps

Here is another solution, which fits best for me and maybe it helps some other:

I use the tooltip plugin for showing up administration options on specific elements. So everytime the tooltip trigger element is hovered the tooltip shows up. But as the administrator view of the site is same as the user's, it might be annoying to have these bubbles all the time.

So added a link with a toggle function to switch tooltips on and off.

Toggle function

$('#admin_edit_mode_change').click(function() {
  var status = $("#edit_icon_1").css('display');
  if(status == 'block'){
    $(".bubble").each(function(index) {  
      $("#edit_icon_"+index).hide();
    })
    $(".bubble").siblings("div").addClass('hide');
    $('#admin_edit_mode_change').html('Turn edit mode OFF');
    $(".bubble").siblings("div").hide();
  }else{
    $(".bubble").each(function(index) {  
      $("#edit_icon_"+index).show();
    })
    $(".bubble").siblings("div").hide();
    $(".bubble").siblings("div").removeClass('hide');
    $('#admin_edit_mode_change').html('Turn edit mode ON');
  }
});

Because I couldn't properly destroy the tooltips, I hide them. This is why I add the class "hide". The CSS to that class is:

.hide {
  height: 0px !important;
  width: 0px !important;
  padding: 0 !important;
  display: none;
  overflow: hidden;
}

But it is not enough to make them invisible and shrink them to zero.
If you hover the trigger elements while in "non-edit" mode tooltip show them up, even if you are not able see them. But they remain in cache showed up and when you reanable "edit-mode" they appear instantly. That's why I added

$(".bubble").siblings("div").hide();

.bubble is the trigger class for all tooltips to show up
.siblings("div") is used to make the next div-element be recognised as tooltip-div

Adding this into the toggle function made the tooltip work more properly than adding the hide()-function in "onBeforeShow".

The first part of the code is jsut the toggle check:

var status = $("#edit_icon_1").css('display');
  if(status == 'block'){
  ...

The edit icon id's are given to small pencil that are shown above the hover trigger element to indicate that there is something to edit.

Maybe this will help some of you. I know that it is not the 'cleanest' method but it works for me very well.

And please excuse my english writing if it is bad. English is not my native language.

You can't just null out the tooltip, you also have to remove the markup:

jQuery(element).data('tooltip').getTip().remove();
jQuery(element).data('tooltip',null);