jQuery Tools - 工具提示问题

jQuery Tools - Tooltip issue

本文关键字：问题 工具提示 Tools jQuery      更新时间：2023-09-26

这里有一个工具提示问题。希望有人可以帮助稍微调整一下代码。我正在使用jQuery工具来实现工具提示。我需要工具提示才能从单独的div 打开，在那里我可以使用任何 html 代码。到目前为止，我只有一个工具提示要打开：

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
  $(document).ready(function() {
        $("#download_now").tooltip({
           offset: [5, 0],
           effect: 'slide'
        }).dynamic({ bottom: { direction: 'down', bounce: true } });
});
</script>

它工作正常，除了我需要添加更多工具提示。

任何人都可以帮助修改脚本，以便可以通过他们的 id 添加更多工具提示吗？

这是带有一个工具提示的 JSFiddle（工作）

这是带有更多工具提示的 JSFiddle（不起作用）

我相信应该有一个简单的解决方法。我只是不是JavaScript专家。

谢谢！

好的，

我知道了。很抱歉，我以为你使用的是jquery-ui工具提示（据我说，它提供了比你正在使用的库更好的小部件）。

通过阅读文档，我发现：

在此之后，触发器旁边的元素将用作工具提示

这意味着您的工具提示内容（您指定的 html）需要放置在您想要 tootip 的元素之后，如下所示：

Lorem ipsum 
<a id="download_now1" class="need_tooltip">
    <strong>dolor sit amet</strong>
</a>
<div class="tooltip">
    <p><strong>Some sample text</strong> with html within...</p>
</div>

看看这个jsFiddle。

如果你不能把工具提示内容直接放在元素后面，我建议你使用jquery-ui，它更灵活地定义工具提示内容。

编辑以提供 jquery-ui 版本

jquery-ui 工具提示基本上在元素失去焦点时关闭，因此您无法将鼠标悬停在工具提示上（例如，单击其中的链接）。但是有一种解决方法可以防止工具提示在此类情况下关闭:)。因此，我认为这个新的jsFiddle正在满足您的要求。

相关文章：