Question

我无法找到此plugin的解决方案，因为我无法通过Ajax找到任何有关外部内容的工作演示或文档。

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

<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来明确设置它，这将使您的代码稍微更具可读性并且可维护

工具提示支持建议（见comments）

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

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

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

1 个答案: