为什么这个 jQuery 插件 (Tooltipster) 的 Ajax 内容只在鼠标悬停 2 次后显示？

Question

我找不到这个 plugin 的解决方案，因为我无法通过 Ajax.

找到任何外部内容的工作演示或文档

基本上我有一个简单的 div 带有鼠标悬停 JS 功能：

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

这是我的 JS 函数：

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

                });
            }
        }
    });

}

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

这是一个类似的例子。 JSFiddle

更新

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

<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>

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

Answer 1

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

将JS与HTML

分开

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

在文档就绪时初始化工具提示

$(document).ready(function() {
    $('.tooltip').tooltipster();
});

悬停触发工具提示

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

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

注：

Tooltipster 的默认触发器是 hover（如文档中所示），但是，您可以通过传入 trigger: hover 来显式设置它，这将使您的代码更具可读性，并且这样可维护。

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

我添加这个是因为它加强了我上面的解决方案并为未来的开发者添加了上下文...那，它可能会在评论部分被忽略。

You initialize your tooltip when the mouseover event has already been fired, so Tooltipster cannot "hear" this first event and open the tooltip. You'd better initialize your tooltips at page load and put your comment id in a data-id attribute that you'll retrieve in functionBefore when you prepare your ajax call.

为什么这个 jQuery 插件 (Tooltipster) 的 Ajax 内容只在鼠标悬停 2 次后显示？

Why the Ajax content of this jQuery plugin (Tooltipster) is shown only after mouse hover 2 times?

javascript

ajax

jquery

tooltipster