user3001859 user3001859 -3 years ago 94
jQuery Question

JQuery UI Tooltip still showing even after we remove title dynamically

I have a table with cells which dynamically adds/removes background-color and title on click. I am using Jquery UI tooltip to display a tooltip. But it keeps displaying the tooltip even when we update the element and remove the title.

[ Here is a JSfiddle which demonstrates the problem:
https://jsfiddle.net/uz34vwf5/8/ - if you click a cell - it highlights it and adds a title in both tables. Now if you move your mouse over them you can see the basic alt text in the first table, and a styled tooltip in the 2nd.

Now click on them again to remove the title. In the first table, you can see it no longer displays the alt text. But in the 2nd, it keeps displaying the tooltip with the old title. ]

I have tried using:

$(this).tooltip('disable');


..but it doesn't work.

Answer Source

Try this demo: https://jsfiddle.net/uz34vwf5/9/

Instead of initializing tooltip on the whole table #table2, initialize on each of td. And also use tooltip('destroy'), you wont see the old tooltips again.

Like this;

$('td').click(function() {
    if ($(this).hasClass("clicked")) {
        $(this).removeClass("clicked");
        $(this).attr("title", "");
        $(this).tooltip('destroy');

    } else {
        $(this).addClass("clicked");
        $(this).attr("title", "Whatever");
        $(this).tooltip();
    }
});
//$('#table2').tooltip();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download