jQuery Tools -> Tooltip destroy method?

Question

I am using Flowplayer's jQuery Tools framework (specifically the tooltips plugin) in a table, in addition to jQuery UI calendar.

Each row of the table has the ability to insert a row above and below it.

When doing this I am cloning the clicked object (events and objects) and inserting it directly above or below.

After adding a new row, I refresh the table, generating new id's for my elements, reinitializing the datepicker, and attempting to reinitialize the tooltip.

I am searching for a way to destroy it altogether from the instance and reapply it.

I am looking for something similar to the datepicker('destroy') method.

$j($editRow).find('input.date').datepicker('destroy').datepicker({dateFormat: 'mm-dd-yy', defaultDate : defaultDateStr});

I have already attempted to :

1. to unbind the mouseover and focus events : when reinvoking tooltip, it automatically goes for the object it was made from.

2. hide the tooltip DOM element, remove the tooltip object from the target, and reapply it. The same thing happens as (1)

Is there way I can create a destroy method myself?

Answer 1

I tried kwicher's method, and could not get it to work. Although I was trying to alter the minified code, and I'm not entirely sure I found the right place to make the change.

I did, however, get this to work. ValidationFailed is a class I am applying to all the input fields that are also having tooltips applied to them.

$('.validationFailed').each(function (index) {
    $(this).removeData('tooltip');
});

$('.tooltip').remove();

I tried this several different ways, and this was the only combination that allowed me to add additional tool tips post-removal, without preventing the new tooltips from working properly.

As best I can tell, the tooltip class removal handles getting rid of the actual tooltip divs, whose events are also wired up directly. The .removeData allows the tooltip to be re-bound in the future.

Answer 2

Building on your ideas and Tom's answer, I found that three things are necessary:

1. remove the 'tooltip' data from the tooltip target element
2. unbind event listeners from the tooltip target element
3. remove the element (assuming you're using this tooltip approach to allow for arbitrary HTML in your tip)

So, this simple function should do the trick. Just pass it a jQuery object containing the target elements of the tooltips you want to destroy.

function destroyTooltips($targets) { 
    $targets.removeData('tooltip').unbind().next('div.tooltip').remove();
}

Answer 3

If you still need it you can do as follows: - in the tooltip implementation file add the following function

destroy: function(e) {
        tip.detach();
        }

somewhere in :

$.extend(self, {
...

I have after the last native function.

Then when you want to remove the tip, fire:

$(.tip).data('tooltip').destroy();

It should do the trick

K

Answer 4

   if($element.data('ui-tooltip')) {//if tooltip has been initialized
       $element.tooltip('destroy');
   }

Answer 5

Maybe it's too late... ;-)
But here you can find all methods of 'tooltip': http://www.w3schools.com/bootstrap/bootstrap_ref_js_tooltip.asp

I leave the tip for someone who could pass by, having the same problem: dealing with different 'tooltip' actions/objs.