仅在完全创建时显示工具提示

Display tooltip only when fully created

本文关键字：显示 工具提示 创建      更新时间：2023-09-26

我为我的网站创建了很好的工具提示，但是当我用鼠标快速行驶时，以及在缓存数据之前，我遇到了问题。

情况如下：我从数据库创建直观的工具提示。为了做到这一点，我有 2 个 ajax 调用，创建很多 dom 来拥有我想要的东西等。函数逐个调用自身，但在完全创建工具提示之前会显示结果。

为了触发显示，我使用单个：

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

我希望工具提示仅在 ajax 调用完成时显示，工具提示已完全创建，不会与之前或类似的东西重叠。当 ajax 被缓存时，它可以正常工作，但在缓存时不能正常工作。

我尝试使用 async：false，但它创建的冻结对工具提示重叠的用户友好性较差我尝试了回调，但它似乎不像我想要的那样工作......或者也许我做得不好。

欢迎任何帮助:)

编辑：

这是我的 BuildTooltip 函数的代码。但是它调用了其他函数，并且所有内容都在 400 行左右，我不会复制所有:(

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

}

FillInTooltip 函数使用 ajax 的结果，格式化它，将其包含在div 中，如果结果与条件匹配，它调用另一个 ajax 等

您可以在 Ajax 请求成功时显示工具提示：

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

现在，在 Ajax 请求完成之前，工具提示不应显示。

相关文章：