Question

出于某种原因，我需要将鼠标放在“详细信息”锚点两次以显示工具提示。那是为什么？

HTML code bit：

<a class="tt" data-animation="grow" data-position="left" data-speed="500" data-offsetx="41" data-offsety="38" data-maxwidth="683" data-interactive="true" data-theme=".tooltipster-standard" title="<div><h1>Package Name<span>£99.99</span></h1></div>">Details</a>

jQuery代码：

    $('.tt').mouseover(function(e){
        $(this).tooltipster(addCaps($(this).data()));
    });

Answer 1

由于tooltipster()设置了工具提示，因此无法显示。

因此，您的第一个鼠标悬停设置工具提示，然后第二个显示工具提示。

请改为尝试：

$(document).ready(function() {
    $('.tt').each(function(e){
        $(this).tooltipster(addCaps($(this).data()));
    });  
});

Answer 2

您可以使用类似于HTML的内容：

<a class="tt" OnMouseOver="Hover()" ...other attributes and tags

来自Javascript（JQUERY）方面：

function Hover(){
$(this).tooltipster(addCaps($(this).data()));
}

或使用纯JavaScript创建：

document.querySelector(".tt").addEventListener("onmouseover",function(){

$(this).tooltipster(addCaps($(this).data()));

},false);

或者用Jquery创建它：

$(".tt").hover(function(){
$(this).tooltipster(addCaps($(this).data()));
}

Explination：
这是因为鼠标悬停jQuery方法工作当用户鼠标已经进入并移动时你需要首先进入该区域而不是再次将鼠标移到它上面还悬停包括输入和结束那就是为什么它工作。
+正如我的朋友说的那样升级你的JQUERY版本。我的观点如果查看任何意见或建议，欢迎：）

Answer 3

尝试mouseenter以确保在输入时调用工具提示器一次。

$('.tt').mouseenter(function(e){
    $(this).tooltipster(addCaps($(this).data()));
});

Answer 4

使用hover代替mouseover也考虑升级jQuery版本。

jQuery：mouseover仅从第二个悬停触发

4 个答案: