Question

我目前有一个标题标记，我已根据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

这是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");
});

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

Answer 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> :)'
    );
});

归功于Abby Langer

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

2 个答案: