CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tooltip
coderD
coderD

Reputation: 265

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.

Upvotes: 0

Views: 1814

Answers (1)

yeyene
yeyene

Reputation: 7380

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();

Upvotes: 1

Related Questions