Search code examples
javascriptjqueryajaxjquery-tools

jquerytools tooltip on ajax issue


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

Solution

  • 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