javascript - jQuery 工具 - 工具提示问题

Question

这里有一个工具提示问题。希望有人可以帮助稍微调整一下代码。我正在使用jQuery Tools for implementing a tooltip 。我需要从单独的 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 with one tooltip (工作中)

这是JSFiddle with more tooltips (不工作)

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

谢谢!

Answer 1

好的，我明白了。抱歉，我以为您正在使用 jquery-ui tooltip (根据我的说法，它提供了比您正在使用的库更好的小部件)。

通过阅读the documentation我发现:

After this the element next to the trigger is being used as the tooltip

这意味着您的工具提示内容(使用您指定的 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 满足您的要求。