CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-tooltip
Matt Facer
Matt Facer

Reputation: 3105

jQuery Tooltips staying on screen with Ajax call

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!

Upvotes: 0

Views: 2371

Answers (3)

Francois Brand
Francois Brand

Reputation: 31

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 */

Upvotes: 0

Dan Francis
Dan Francis

Reputation: 1

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

Upvotes: 0

Evan Davis
Evan Davis

Reputation: 36592

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.

Upvotes: 1

Related Questions