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).
精彩评论