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

by this `$('.tooltip').remove();` you remove all elements with tooltip class, which creates the plugin. Plugin itself doesnt have destroy method. Do not use tooltip for notification, try somthing like http://ned.im/noty/ — petkopalko, Mar 12 '14 at 22:47
Look at this question: http://stackoverflow.com/questions/4879983/jquery-tools-tooltip-destroy-method — petkopalko, Mar 12 '14 at 22:49
i have, i have tried 2 solutions with no results, mark solution is ok , but im doing a syntax error, do i have to replace $target for something i have copied his function, in the ajax i run destroyTooltips($tooltip); no luck at all :( — Moncho Chavez, Mar 12 '14 at 22:52

score 1 · Answer 1 · answered Mar 12 '14 at 22:58

1

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

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

Your $tooltip variable doesnt contain the right element.

answered Mar 12 '14 at 22:58

petkopalko

600
7
18

thats goes inside the ajax , instead of $tooltip = $('.tooltip').remove(); right? – Moncho Chavez Mar 12 '14 at 22:59
oh i think i have it. – Moncho Chavez Mar 12 '14 at 23:00
Yes replace your code and try it. The jquery object should contain class/id of element you want to destroy the tooltip. – petkopalko Mar 12 '14 at 23:01
I will edit, i try i think ok, pls check if you can , – Moncho Chavez Mar 12 '14 at 23:03
do not call `ttp();` after destroying the tooltips – petkopalko Mar 12 '14 at 23:06
i did it, still no luck – Moncho Chavez Mar 12 '14 at 23:12

score 1 · Accepted Answer · 2014-03-13T07:35:27.587

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]
            });
        }
    });
}

I just try, its working fine almost perfect, but its not recreating tooltip on ajax, i do copy your code, will update the ajax call at the bottom of question. its not recreating tooltip, so new html via ajax do not have tooltip ignited — Moncho Chavez, Mar 12 '14 at 23:18
Is the old tooltip inside the #ajaxnotif container and does msg contain the HTML for the new tooltip? I've just updated the code to handle that situation. — , Mar 12 '14 at 23:26
Just for tooltip, since loading the firt time we do ajax, and yes the .marcleidnot item is inside the html recieved by ajax. I try your solution, again no luck, this time the $tooltip in .marcleidnot remain open, never closes (if the tooltip is open when the ajax call happends) — Moncho Chavez, Mar 12 '14 at 23:29
i solve that using $('.tooltip').remove();, wich later causes the other tooltip to get lost... jaja damn — Moncho Chavez, Mar 12 '14 at 23:31
how can i do $('.tooltip').remove(); just for $tooltip that will fix it im sure — Moncho Chavez, Mar 12 '14 at 23:32
Ok I've removed the destroyTooltip(); function so now you can just call $tooltip.remove(); before you replace the HTML. — , Mar 12 '14 at 23:54
thanks, the bug persists even with that, i solve it using this just before that $('.tooltip').hide(); — Moncho Chavez, Mar 13 '14 at 07:12
Ok in that case first .hide() the $tooltip and then .remove() it. — , Mar 13 '14 at 07:36

Destroy Tooltip jquerytools

UPDATE

UPDATE2

2 Answers2