Question

我有一个大约30-50行的信息列表，每个行都需要他们自己独特的工具提示。我知道我可以使这些所有唯一的ID，但这将是很多浪费的JavaScript。我试图让jquery在类似“tool_tip”的任何<DIV>内返回嵌套<DIV>的工具提示，其中包含“show_tooltip”类。所有工具提示都是独一无二的。

<DIV class="tool_tip">
<DIV>Content here</DIV>
<DIV style="display:none;" class="show_tooltip">Any tool tip information goes here with possible html</DIV>
</DIV>

<DIV class="tool_tip">
<DIV>Content here</DIV>
<DIV style="display:none;" class="show_tooltip">Another but different tool tip to be displayed</DIV>
</DIV>

我已经尝试了以下脚本，但它总是返回第一个<DIV>，它找到了一个“show_tooltip”类，并为每一行重复这个。这是我尝试过的脚本：

$(".tool_tip").tooltip({
bodyHandler: function() {
    return $("div.tool_tip").children(".show_tooltip").html();
},
showURL: false
});

我使用以下工具提示插件：http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

编辑：

感谢下面的答案。我生成的代码是：

$(".tool_tip").tooltip({
bodyHandler: function() {
    return $(this).find('.tooltip_content').stop().html();
},
showURL: false
});

Answer 1

这是或应该相对容易：

$('.tool_tip').hover(
    function(){
        $(this).find('.show_tooltip').stop().fadeIn(500);
    },
    function(){
        $(this).find('.show_tooltip').stop().fadeOut(500);
    });

JS Fiddle demo

上述jQuery（以及链接演示）使用：hover()，stop()，fadeIn()和fadeOut()（仅供参考）。

JQuery Tooltip为显示问题选择了嵌套Div

1 个答案: