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（根据我提供的 - 比你正在使用的lib更好的小部件）。

通过阅读the documentation我发现：

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

意味着您的工具提示内容（使用您指定的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>

查看 this jsFiddle 。

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

编辑以提供jquery-ui版本

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

jQuery工具 - 工具提示问题

1 个答案: