使用jQuery工具指定动态工具提示

Question

我正在尝试使用jQuery工具来动态设置一些工具提示，但是我遇到了很大的麻烦。

默认情况下，当您使用jQuery工具以最基本的形式设置工具提示时，它会将工具提示触发器之后的下一个元素作为实际的工具提示。

$("#someElement").tooltip();

在我正在工作的当前应用程序中，我有一个链接，我需要加载一个工具提示，而不是下一个元素。

通过使用jQuery工具，您可以使用以下命令来完成此操作：

$("#someElement").tooltip({tip: '#tooltipElement'});

这很棒，但我需要能够动态设置小费，而我似乎无法做到这一点。

在应用程序上，我的链接设置如下所示：

<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-1">Quick Preview</a>
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-2">Quick Preview</a>
<a href="Javascript:void(0);" class="tooltip-preview" data-tooltip-id="#tooltip-3">Quick Preview</a>...

然后，工具提示将显示在页面底部，如下所示：

<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>...

因此，我尝试做的事情是：

$(".tooltip-preview").tooltip({tip: $(this).attr("data-tooltip-id")});

我有一种感觉，这不起作用，因为$( this )没有被用作$(".tooltip-preview")对象。如果是这种情况，我该如何让它工作呢？

相反，每个链接上的下一个元素将用作工具提示。

Answer 1

这对我很有效：

$(".tooltip-preview").each(function(){
    $(this).tooltip({tip: $(this).attr("data-tooltip-id")});            
});

此答案假设在此块中：

<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>
<div id="tooltip-1">Some random content here!</div>...

您的意思是这样(递增id值是这里的关键点。注意，我还区分了随机内容)：

<div id="tooltip-1">Some random content here! (1)</div>
<div id="tooltip-2">Some random content here! (2)</div>
<div id="tooltip-3">Some random content here! (3)</div>...

我能够复制这个问题，一开始我尝试了：

$(".tooltip-preview").tooltip({tip: $(".tooltip-preview").attr("data-tooltip-id")});

这使您更接近，但它使所有三个工具提示都是“这里的一些随机内容！(1)”，因为选择器只找到属性为"data-tooltip-id“的第一个元素。

所以你必须像上面指出的那样遍历元素。