jQuery Tooltips staying on screen with Ajax call

Question

I am doing an Ajax call which pulls some HTML in to a Div. Inside the divs I have

text with a title. I am then using that title for a Tooltip.

$.ajax({
    url: '/feedme.aspx',
    success: function (data) {
        $('#liveContent').html(data);
        $("#liveContent .liveReader").tooltip({ tipClass: 'tool-tip' });

    }
});

The content returned from the ajax call is

<div id="liveContent">
    <div id="item1" class="liveReader" title="item 1"><p>Text 1</p></div>
    <div id="item2" class="liveReader" title="item 2"><p>Text 2</p></div>
</div>

The tool tips work, but then when the content is refreshed, the tool tip stays on the screen! How can I remove any tooltips prior to the feed being refreshed?

I've actually done this before with Mootools, but cannot find the code to do it with jQuery having just moved over to use that.

Thanks for any help!

Are you saying that, when you make a second ajax call to load new content, the old tooltips remain visible? — Evan Davis, Jun 26 '12 at 14:29

score 1 · Accepted Answer · answered Jun 26 '12 at 14:43

1

The tooltip plugin (I don't know which one you're using) probably adds another div to the end of the body tag, likely with an ID like tooltip. The first step of your ajax success callback should be to hide/remove this div.

answered Jun 26 '12 at 14:43

Evan Davis

35,493
6
50
57

yep that's working nicely... I used the previous person's answer (which has since vanished!) combined with your answer. I simply brought it back to the body level... `$("body *").removeClass("tool-tip");` – Matt Facer Jun 26 '12 at 14:46
You really only need to select items with the class `tool-tip` if you're going to remove it. No need to select everything, as most of the DOM won't have that class. `$('tool-tip').removeClass('tool-tip')` will probably execute faster, though if you can find the div being appended to the dom, you can select just that one thing. – Evan Davis Jun 26 '12 at 14:50
actually... having accepted I've just noticed that the div stays, but the style is removed. So the text is still on screen! – Matt Facer Jun 26 '12 at 15:03
Right, you want to remove the div, not just the class. – Evan Davis Jun 26 '12 at 15:03
yep - it's adding a div at the foot of the page, but there's no ID for it, just the classname. – Matt Facer Jun 26 '12 at 15:09
Well if it's the only div with that classname, you can still select and remove it. – Evan Davis Jun 26 '12 at 15:11
ok done that and it removes the DIV, but it never gets recreated. I am using the jQuery Tools tooltip (http://jquerytools.org/) – Matt Facer Jun 26 '12 at 15:26
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13060/discussion-between-mathletics-and-matt-facer) – Evan Davis Jun 26 '12 at 15:28

score 0 · Answer 2 · answered Dec 18 '13 at 22:52

0

It looks like that there are two 'div's added when you hover the div with the tool tip. Adding these two line prior to the Ajax call fixed the problem for me:

$('.tooltip-inner').remove();
$('.tooltip-arrow').remove();

answered Dec 18 '13 at 22:52

Dan Francis

1
1

score 0 · Answer 3 · answered Apr 16 '15 at 06:13

fwiw - I had the same issue. Best approach is to wait till the tooltip bubble is stuck, then use inspect element (chrome, firebug) and find the name of the element and simply do a remove from there before any following removes . for example (mine was #tooltip):

$("#tooltip").remove();
/* rest of code here */

jQuery Tooltips staying on screen with Ajax call

3 Answers3