jqueryjquery-pluginsjquery-tooltip

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!

Solution

  • 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.