jquerytools tooltip on ajax issue

Question

Ok im doing an ajax call every 15 seconds, this the first time "disable" the tooltip when ajax call was made, i fix this running a function an calling again the function that starts tooltip.

The problem is.. If there is one tooltip "open" when the ajax call is made, this and only this tooltip of this item is destroyed forever, the rest is working fine. until again you are on a open tooltip when the ajax run.

How can i fix this..

here is my code

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


$(document).ready(notifications);
window.setInterval(function(){
  notifications();
}, 15000);

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

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


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

    }


$('body').click(function() {
  $('.tooltip').remove();//remove the tool tip element
});

Answer 1

Thanks to user3352495, i figure out what the problem was, then i figure out this

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

Wich is working fine until now

ACtually i found out i just need to delete this!

just restarting the function doing

ttp(); in the ajax solve this :D

Answer 2

I think you aren't properly using the tooltip api. So instead of

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

do

$tooltip.tooltip("destroy");
$tooltip2.tooltip("destroy");
$tooltip3.tooltip("destroy");

Answer 3

The problem is that the tooltip in Jquery Tools doesn't create the .tooptip elements by default but only creates them when the tooltips appear for the first time. So in your case, when $tooltip appears there's only one .tooltip element associating with it, the other 2 haven't appeared yet.

To comprehensively remove all tooltips, you can use this plugin. It removes the .tooltip element if it's already there or unbinds the mouse events if it's not. After adding the plugin you can simply call $tooltip.tooltip('remove').