JQuery工具提示选择嵌套div显示问题

发布于 2024-10-07 11:58:48 字数 1287 浏览 0 评论 0原文

我有一个大约 30-50 行的信息列表，每行都需要自己独特的工具提示。我知道我可以制作这些唯一的 ID，但这会浪费很多 JavaScript。我试图让 jquery 返回任何具有“tool_tip”类的

内具有“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>

我已经尝试过以下脚本，但它总是返回第一个

以及它找到的“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
});

原文

I have a list of information around 30-50 rows each one requiring their own unique tool tip. I know I could make these all unique IDs but that would be a lot of wasted javascript. I am trying to have jquery return the tooltip of the nested <DIV> with the class of "show_tooltip" inside any <DIV> with the class of "tool_tip". All the tool tips will be unique.

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

I have tried the following script but it always returns the first <DIV> with a class of "show_tooltip" it finds and repeats that for every row. Here is the script I have tried:

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

I am using the following tool tip plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

EDIT:

Thanks for the answer below. My resulting code that worked was:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月寒剑心 2024-10-14 11:58:48

这是或者应该是相对简单的：

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

JS Fiddle 演示。

上面的 jQuery（以及链接的演示）使用：hover()， stop(), stop() jquery.com/fadein/" rel="nofollow">fadeIn() 和 fadeOut()（仅供参考）。

This is, or should be, relatively easy:

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

JS Fiddle demo.

The above jQuery (and the linked demo) uses: hover(), stop(), fadeIn() and fadeOut() (just for reference purposes).

回复收藏 0 原文

~没有更多了~