如何将可点击的链接添加到 Foundation 工具提示答案

【问题标题】：How to add clickable link to Foundation tooltip如何将可点击的链接添加到 Foundation 工具提示
【发布时间】：2017-01-20 09:24:41
【问题描述】：

我目前有一个标题标签，我已将 Foundation 的工具提示附加到 documentation。我希望工具提示本身是可点击的，这样我就可以在点击时显示一个模式，但它不起作用，因为每次我将鼠标悬停在工具提示所附加到的 div 之外时，工具提示就会消失。

我尝试使用 jQuery 中的 .hide() 和 .show() 操作元素，但没有成功。如何强制工具提示在我想要的时候隐藏并保留？谢谢！

<h5 data-tooltip aria-haspopup="true" class="has-tip" title="<a>Click here</a>">Hover for tooltip</h5>

【问题讨论】：

您能提供一个有效的jsfiddle 吗？我想我可能有一个解决方案，但我想在发布之前在 jsfiddle 上对其进行测试
@GilleQ。如果您想测试解决方案，可以轻松创建自己的解决方案 ►jsfiddle.net/q9doz17d
在 jsfiddle 上找到了一个解决方案：D 请参阅下面的答案
@Jay 我同时回答了，但方式不同

标签： jquery html css zurb-foundation frontend

【解决方案1】：

这是一个jsFiddle，可以满足您的需要：

我添加了属性：data-allow-html="true" 和data-disable-hover="true"，然后我自己处理弹出显示和隐藏：

$("body").on("mouseenter", ".has-tip", function() {
    $(this).foundation("show");
});

$("body").on("mouseleave", ".tooltip", function() {
    $(this).siblings(".has-tip").first().foundation("hide");
});

这是最通用的示例，但您现在可以知道从哪里开始

【讨论】：

【解决方案2】：

找到解决方案 (http://jsfiddle.net/abbylangner/XHb4Z/) 基本上，在目标上调用 .tooltip() 方法时，可以将选项添加为 JSON。

    function setClickableTooltip(target, content){
    $( target ).tooltip({
        show: null, // show immediately 
        position: { my: "right top", at: "left top" },
        content: content, //from params
        hide: { effect: "" }, //fadeOut
        close: function(event, ui){
            ui.tooltip.hover(
                function () {
                    $(this).stop(true).fadeTo(400, 1); 
                },
                function () {
                    $(this).fadeOut("400", function(){
                        $(this).remove(); 
                    })
                }
            );
        }  
    });
}

$(document).ready(function(){
    setClickableTooltip('#t1', "some basic content");
    setClickableTooltip(
        '#t2',
        'diff content with <a href="http://abbysdoor.com">link</a> :)'
    );
});

感谢艾比·兰格

【讨论】：