Question

我在页面中有几个这样的链接

<a href="{{ route('user_profile') }}"
   class="user-tooltip"
   data-uid="{{ $user->id }}>
    {{ $user->name }}
</a>

通过悬停链接，我显示了一个工具提示，其中包含用户的头像和一些信息。直到现在，我还是为页面上的每个用户生成了一个不同的html工具提示，但页面显示的用户正在增长，我只想在需要时以及在需要时为工具提示加载信息。为此，我对服务器进行了AJAX调用，并且将html标记代码放入了工具提示中，但不会显示。

这是绑定到链接的代码

$('.user-tooltip').tooltipster({
    interactive: true,
    content: 'Loading...',
    contentAsHTML: true,
    multiple:true,

    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);

        if ($origin.data('loaded') !== true) {
            $.get('https://localtest.mys/user-tooltip', 
                  {uid:$origin.data('uid')}, 
                  function(data) {
                        instance.content($(data));

                        $origin.data('loaded', true);
            });
        }
    }
});

当我将鼠标悬停在链接上时，会显示一个包含Loading...消息的工具提示，一段时间后，该工具提示将变为空。来自服务器的响应是正确的，我已经验证过，它是包含正确的html标签的字符串，但是未在工具提示中呈现。

我想念什么？

工具提示：http://iamceege.github.io/tooltipster/

编辑：为澄清起见，来自服务器的html放在工具提示中（分析了我可以读取的元素），但未呈现。

尝试委派的问题是相同的：

$('body').on('mouseenter', '.user-tooltip:not(.tooltipstered)', function(){
    $(this).tooltipster({
        interactive: true,
        content: 'Loading...',
        contentAsHTML: true,

        functionBefore: function(instance, helper) {
            let $origin = $(helper.origin);

            if ($origin.data('loaded') !== true) {
                $.get('https://localtest.mys/user-tooltip', {uid:$origin.data('uid')}, function(data) {
                    instance.content($(data));

                    $origin.data('loaded', true);
                });
            }
        }
    }).tooltipster('open');
});

工具提示：未显示来自AJAX的HTML内容

0 个答案: