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.