如何将可点击的 link 添加到 Foundation 工具提示

Question

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

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

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

Answer 1

找到解决方案（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> :)'
    );
});

归功于 Abby Langer

Answer 2

这里有一个 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");
});

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

如何将可点击的 link 添加到 Foundation 工具提示

How to add clickable link to Foundation tooltip

html

css

jquery

frontend

zurb-foundation