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

Question

我目前有一个 header 标签，我已根据 documentation 将 Foundation 的工具提示附加到该 header 标签上.我希望工具提示本身是可点击的，这样我就可以在点击时显示一个模式，但它不起作用，因为每次我将鼠标悬停在工具提示所附加的 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");
});

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