Javascript 为什么这个jQuery插件（Tooltipster）的Ajax内容只有在鼠标悬停2次后才会显示？_Javascript_Jquery_Ajax_Tooltipster

Javascript 为什么这个jQuery插件（Tooltipster）的Ajax内容只有在鼠标悬停2次后才会显示？

javascript jquery ajax

Javascript 为什么这个jQuery插件（Tooltipster）的Ajax内容只有在鼠标悬停2次后才会显示？,javascript,jquery,ajax,tooltipster,Javascript,Jquery,Ajax,Tooltipster,我找不到解决方案，因为我找不到任何通过Ajax的外部内容的工作演示或文档基本上我有一个简单的div，带有鼠标悬停JS功能： <div onmouseover="myFunct(this,'.$comment['id'].');" >Hover Me</div> function myFunct(element, id){ $(element).tooltipster({ contentCloning: true, inter

我找不到解决方案，因为我找不到任何通过Ajax的外部内容的工作演示或文档

基本上我有一个简单的

div

，带有鼠标悬停JS功能：

<div onmouseover="myFunct(this,'.$comment['id'].');"  >Hover Me</div>

function myFunct(element, id){

    $(element).tooltipster({
        contentCloning: true,
        interactive:true,
        maxWidth:250,
        contentAsHTML:true,
        content: 'Loading...',

        // 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
        functionBefore: function(instance, helper) {

            var $origin = $(helper.origin);

            // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
            if ($origin.data('loaded') !== true) {

                $.ajax({
                    type: "POST",
                    url: baseUrl+"/requests/load_profilecard.php",
                    data: 'id='+id+"&token_id="+token_id,
                    cache: false,
                    success: function(html) {           
                    // call the 'content' method to update the content of our tooltip with the returned data
                    instance.content(html);

                    // to remember that the data has been loaded
                    $origin.html('loaded', true);
                    }

                });
            }
        }
    });

}

为什么只在第二次鼠标悬停时显示工具提示？

这是一个类似的例子

更新

感谢支持，这解决了我的问题：

<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.tooltip').tooltipster({
        content: 'Loading...',
        functionBefore: function(instance, helper){
            var $origin = $(helper.origin);
            $.ajax({
                type: "POST",
                url: baseUrl+"/requests/load_profilecard.php",
                data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
                cache: false,
                success: function(html) {           
                    // call the 'content' method to update the content of our tooltip with the returned data
                    instance.content(html);

                }
            });   
        },
        interactive:true,
        contentAsHTML:true,
        maxWidth:250
    });
});
</script>

让我停下来！
$（文档）.ready（函数（）{
$（'.tooltip'）.tooltipster({
内容：“正在加载…”，
functionBefore:函数（实例、助手）{
var$origin=$（helper.origin）；
$.ajax({
类型：“POST”，
url:baseUrl+“/requests/load_profilecard.php”，
数据：“id=”+$origin.attr（'data-id'）+“&token\u id=“+token\u id，
cache:false，
成功：函数（html）{
//调用“content”方法，用返回的数据更新工具提示的内容
内容（html）；
}
});   
},
互动：没错，
contentAsHTML：是的，
最大宽度：250
});
});

无论如何，这对Ajax动态内容不起作用，我也不知道为什么（我试图在Ajax页面上插入它，没有办法）

我建议做几件事：首先，将JS与HTML分开（这被认为是最佳实践），其次，在页面加载时初始化Tooltipster，最后，删除包装器函数。工具提示初始化后，默认情况下，代码将在悬停时触发

将JS与HTML分开

<div class="hover-me tool-tip" data-commentId="12345">Hover Me</div>

使用悬停触发工具提示

$('.hover-me').tooltipster({
    // all of your code from above

    functionBefore: function(){
        var commentId = $(this).attr('data-commentId');
    }
});

注意：

Tooltipster的默认触发器是

hover

（如文档中所示），但是，您可以通过传入

trigger:hover

来显式设置它，这将使代码更具可读性和可维护性

工具提示支持建议（如中所示）

我之所以添加这一点，是因为它强化了我上面的解决方案，并为未来的开发人员添加了上下文……这一点在评论部分可能会被忽略

当鼠标悬停事件已经触发时，您将初始化工具提示，因此工具提示器无法“听到”第一个事件并打开工具提示。您最好在页面加载时初始化工具提示，并将注释id放入数据id属性中，在准备ajax调用时，您将在functionBefore中检索该属性

我推荐几件事：首先，将JS与HTML分开（这被认为是最佳实践），其次，在页面加载时初始化Tooltipster，最后，删除包装器函数。工具提示初始化后，默认情况下，代码将在悬停时触发