CODEWITHSUNDEEP
javascriptjquery
Gabriel
Gabriel

Reputation: 113

Display tooltip only when fully created

I created nice tooltip for my website but i've an issue when i go to fast with the mouse, and before the data are cached.

Here is the situation: I create dinamicly tooltip from a database. I've 2 ajax call in order to do so, create a lot of dom to have exactly what i want etc. Functions are calling themselves one by one, but the result is display before the tooltip is fully created.

To trigger the display I use a single:

$('a').live('mouseenter',function(){
     BuildTooltip(this);
     $('#tooltipdiv').css('visibility','visible');
});

I want the tooltip to display only when ajax calls are finished, tooltip is fully created and won't overlap with previous or thing like this. The work properly when ajax are cached, but doesn't when they are'nt.

I tried using async:false, but the freezes it creates are less userfriendly that tooltip overlapping I tried callback but it doesn't seem to work like i want... or maybe i did it bad.

Any help yould be welcome :)

Edit:

Here is the code of my BuildTooltip function. However it called other functions, and everything is around 400 lines to i won't copy all :(

function BuildTooltip(element){
$('#tooltipdiv').remove();
if(String(element).indexOf('dbitem.php?db=')!=-1){
    url=String(element);
    var db=url.substring(url.indexOf('=')+1,url.indexOf('&'));
    $('body').append('<div class="" id="tooltipdiv"><div class="" id="uctt">\
        <div class="" id="itemttheader"></div><span class="" id="nomitem">\
        </span><div class="" id="imgitem"><img></img></div><div class="" id="type">\
        </div></div><div id="cd"></div><div class="" id="armor"><span class="" id="minarmor">\
        </span><span class="hash">-</span><span class="" id="maxarmor"></span> Armor</div><div class="" id="dmgweap">\
        <span class="" id="min"></span><span class="hash">-</span><span class="" id="max"></span> Damage</div>\
        <div class="" id="dmgweapnorm"><span class="" id="minmin"></span>\
        <span class="hash">-</span><span class="" id="maxmin"></span><span class="hash">-</span><span class="" id="minmax"></span><span class="hash">-</span>\
        <span class="" id="maxmax"></span> Damage</div><div class="" id="dpsnorm">\
        <span class="" id="mindamagepersec"></span> <span class="hash">-</span> <span class="" id="maxdamagepersec">\
        </span><p> Damage Per Second</p></div><div class="" id="dps"><span class="" id="damagepersec">\
        </span><p> Damage Per Second</p></div><div class="" id="attackspeed"><span class="" id="aps">\
        </span> Attacks Per Second</div><div class="" id="effect"></div><div class="" id="effectpsk">\
        </div><span class="" id="slot"></span><div id="useless"></div><div id="set"><span></span><div id="part0" class="part"></div>\
        <div id="part1" class="part"></div><div id="part2" class="part"></div><div id="part3" class="part"></div>\
        <div id="part4" class="part"></div><div id="part5" class="part"></div></div><div class="" id="requiredlevel">Required level : \
        <span class="" id="minlvl"></span></div><div class="" id="rewards">Rewards : \
        <span class="" id="reward"></span></div><div class="" id="points">\
        <span class="" id="point"></span> Points</div><div class="" id="durability">\
        Durability : <span class="" id="duramin"></span><span class="hash">-</span><span class="" id="duramax">\
        </span></div></div></div>');
    var offset=$(element).offset();
    request = $.ajax({
    url: "getphp/gettooltip.php",
    type: "GET",
    data: {db : db, id : url.substring(url.lastIndexOf('=')+1)},
    dataType: "JSON"
    });
    request.done(function(msg){
    FillInTooltip(msg,db)
    });
}

}

The FillInTooltip function use the result of the ajax, format it, include it in divs, if the result match a condition it call an other ajax etc

Upvotes: 0

Views: 132

Answers (1)

Sameh Serag
Sameh Serag

Reputation: 746

You can display tooltip on success of the Ajax request:

$.ajax({
    type: "POST",
    url: URL, // your url
    success: function (html) {
        $('#tooltipdiv').css('visibility','visible');
    }
});

Now the tooltip shouldn't display until the Ajax request has completed.

Upvotes: 3

Related Questions