Destroy Tooltip jquerytools

Question

Ok i have this code where i set $tooltip for 3 different items, wich just $tooltip is refreshed using ajax.. Works great, but after refresh in ajax i have to run

$('.tooltip').remove();

This is a problem cause after this ajax call, the $tooltip2 and $tooltip3 are lost, =(. Ive also tried this:

$tooltip = $('.tooltip').remove();

But im wrong obviously.

Here is the code where i set $tooltip

var $tooltip = null;
    var $tooltip2 = null;
var $tooltip3 = null;
    function ttp() {

    $tooltip = $('.marcleidnot[title]').tooltip({
    delay:100,
    slideInSpeed: 300,
    slideOutSpeed: 300,
    bounce: false,
    /*bounce: false*/
    relative: false, // <-- Adding this should sort you out
    effect: 'slide',
    direction: 'down',
    /*slideInSpeed: 300,
    slideOutSpeed: 200,*/
    position: 'top center',
    offset: [-15, 0]
});

    }

    $( document ).ready(function() {

$tooltip2 = $('.fav[title]').tooltip({  
    delay:50,
    slideInSpeed: 200,
    slideOutSpeed: 200,
    /*bounce: false,*/
    relative: false, // <-- Adding this should sort you out
   effect: 'slide',
    direction: 'down',
    /*slideInSpeed: 300,
    slideOutSpeed: 200,*/
    position: 'top center',
    offset: [10, -2]
});

 $tooltip3 = $('.nofav[title]').tooltip({
    delay:50,
    slideInSpeed: 200,
    slideOutSpeed: 200,
    /*bounce: true,*/
    relative: false, // <-- Adding this should sort you out
    effect: 'slide',
    direction: 'down',
    /*slideInSpeed: 300,
    slideOutSpeed: 200,*/
    position: 'top center',
    offset: [10, -2]
});

});

And the Ajax call

function notifications() {
    $.ajax(
            {
                type: "POST",
                //data: dataparam,
                url: "<?php echo $notifurl;?>",
                success: function(msg)
                    {
                        if(msg !="")
                        {
                            $("#ajaxnotif").empty().html(msg);
                            //$('.tooltip').remove();

        $tooltip = $('.tooltip').remove();

                             ttp();
                            //$("#suggestDiv").show();
                        }
                        else
                        {
                            $("#ajaxnotif").empty().html(msg);

    $tooltip = $('.tooltip').remove();

                            ttp();
                            //$("#suggestDiv").hide();
                        }
                    }
            });
    }

UPDATE

After the answer i edit and do

function destroyTooltips($targets) { 
    $targets.removeData('tooltip').unbind().next('div.tooltip').remove();
}

var $destroyThis = $('.marcleidnot[title]');



function notifications() {
    $.ajax(
            {
                type: "POST",
                //data: dataparam,
                url: "<?php echo $notifurl;?>",
                success: function(msg)
                    {
                        if(msg !="")
                        {
                            $("#ajaxnotif").empty().html(msg);
                            //$('.tooltip').remove();
        destroyTooltips($destroyThis);  

                             ttp();
                            //$("#suggestDiv").show();
                        }
                        else
                        {
                            $("#ajaxnotif").empty().html(msg);
    destroyTooltips($destroyThis);

                            ttp();
                            //$("#suggestDiv").hide();
                        }
                    }
            });
    }

The problem is now that the tooltip remain open forever, when the ajax call is made..

but now i am not losing $tooltip2, and $tooltip3

what am i doing wrong.

UPDATE2

After the 2nd Great Answer full of details, is not recreating the tooltip why?

function notifications() {
    $.ajax(
            {
                type: "POST",
                //data: dataparam,
                url: "<?php echo $notifurl;?>",
                success: function(msg)
                    {
                        if(msg !="")
                        {
                            $("#ajaxnotif").empty().html(msg);
                            //$('.tooltip').remove();
         destroyTooltip($tooltip);

            // If you update the title of the tooltip, it will be init correctly.
            $tooltip.attr('title', msg);

            initTooltip($tooltip, {
                delay        : 100,
                slideInSpeed : 300,
                slideOutSpeed: 300,
                bounce       : false,
                offset       : [-15, 0]
            });
                            //$("#suggestDiv").show();
                        }
                        else
                        {
                            $("#ajaxnotif").empty().html(msg);
     destroyTooltip($tooltip);

            // If you update the title of the tooltip, it will be init correctly.
            $tooltip.attr('title', msg);

            initTooltip($tooltip, {
                delay        : 100,
                slideInSpeed : 300,
                slideOutSpeed: 300,
                bounce       : false,
                offset       : [-15, 0]
            });
                            //$("#suggestDiv").hide();
                        }
                    }
            });
    }

Answer 1

First prepare the variables for each tooltip.

var $tooltip  = null;
var $tooltip2 = null;
var $tooltip3 = null;

Create a function to initialize a tooltip.

function initTooltip($theTooltip, theOptions) {

    var defaultOptions = {
        delay         : 50,
        slideInSpeed  : 200,
        slideOutSpeed : 200,
        relative      : false,
        effect        : 'slide',
        direction     : 'down',
        position      : 'top center',
        offset        : [-15, 0]
    };

    if (typeof theOptions != 'undefined') {
        theOptions = $.extend({}, defaultOptions, theOptions);
    } else {
        theOptions = defaultOptions;
    }

    $theTooltip.tooltip(theOptions);
}

In the document ready event, first look up the tooltips in the DOM and then initialize each one separately.

$(document).ready(function() {

    $tooltip  = $('.marcleidnot[title]');
    $tooltip2 = $('.fav[title]');
    $tooltip3 = $('.nofav[title]');

    initTooltip($tooltip, {
        delay        : 100,
        slideInSpeed : 300,
        slideOutSpeed: 300,
        bounce       : false,
        offset       : [-15, 0]
    });

    initTooltip($tooltip2);

    initTooltip($tooltip3);

});

When the AJAX call finishes, just destroy the specific tooltip and then recreate it.

function notifications() {
    $.ajax({
        type: "POST",
        url: "<?php echo $notifurl;?>",
        success: function(msg) {

            // Hide and destroy the old tooltip before you replace the HTML.
            $tooltip.hide().remove();

            // Replace the old HTML with the new HTML.
            $("#ajaxnotif").empty().html(msg);

            // Update the variable for the replaced tooltip.
            $tooltip = $('.marcleidnot[title]');

            // Init the tooltip again.
            initTooltip($tooltip, {
                delay        : 100,
                slideInSpeed : 300,
                slideOutSpeed: 300,
                bounce       : false,
                offset       : [-15, 0]
            });
        }
    });
}

Answer 2

After comments... try use Mark function with these parameters:

var $destroyThis = $('.marcleidnot[title]');
destroyTooltips($destroyThis);

Your $tooltip variable doesnt contain the right element.