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 回答