开发者

JQuery Tool Tip Selected Nested Div for Display Problem

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
});


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜