Question

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

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

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

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

使用jQuery Tools，您可以使用：

执行此操作

$("#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”的第一个元素。

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

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

1 个答案: