1

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

默认情况下，当您使用 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") 对象。如果是这种情况，我该如何让它工作？

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

4

1 回答 1

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

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

于 2012-08-16T18:40:20.397 回答