0

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

<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 专家。

谢谢！

4

1 回答 1

3

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

通过阅读文档，我发现：

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

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

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>

进去看看this jsFiddle。

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

编辑以提供 jquery-ui 版本

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

于 2013-10-18T22:35:12.850 回答