Question

我的WordPress帖子（如{http://vps46331.inmotionhosting.com/~hellod8/10-fun-things-to-do-with-kids-this-weekend-2-15-19-2-17-19/）在页面底部的“共享”链接中都有工具提示。但是，我也想将HTML合并到代码中，这就是我要强调的地方。

我发现了这个小提琴：http://jsfiddle.net/AK7pv/111/

但是将其添加到我的链接标题后，一切都会搞砸，并且只是在工具提示中吐出HTML：

<p>Share <button id="trigger" class="trigger" data-html="true" data-tooltip-id="1" title="<p><a href='#' title='Email'><i class='fas fa-envelope'></i> Email</a><br><a href='#' title='Copy Link'><i class='fas fa-link'></i> Copy Link</a></p>"><i class="fas fa-share"></i></button></p>

这是当前的Javascript：

jQuery(function () {
    //show
    jQuery(document).on('click', '.trigger', function () {
        jQuery(this).addClass("on");
        jQuery(this).tooltip({
            items: '.trigger.on',
                position: {
                    my: "right+10 center",
                    at: "left center",
                    collision: "flip"
            }
        });
        jQuery(this).trigger('mouseenter');
    });
    //hide
    jQuery(document).on('click', '.trigger.on', function () {
        jQuery(this).tooltip('close');
        jQuery(this).removeClass("on");
    });
    //prevent mouseout and other related events from firing their handlers
    jQuery(".trigger").on('mouseout', function (e) {
        e.stopImmediatePropagation();
    });
});

Answer 1

首先，您的打开<button>标签未关闭。另外，您可能需要在按钮标记中使用data-html=true。

jQuery工具提示：插入带有链接的HTML代码

1 个答案: