I have sort of a tool tip kind of thing that I'm having trouble with. I have a hidden div in a list item, that I want to reveal on mouse over. The problem is the list is a carousel, so the tip will get lost behind the overflow if it is the last item.
My solution was to move the div outside, which work just fine, and displays as i like. But i'm having trouble figuring out how to put it back. The div will have links in it, so i need to be able to hover over it.
Here is a simple version of what I mean:
$('.wrapper li').mouseover(function() {
$(this).children('.This_is_hidden').clone().appendTo(".other").css('display', 'block' );
}
});
$('.wrapper li').mouseout(function() {
// i want to put it back in the same li
}
});
here is the markuo:
<div class="wrapper">
<ul>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
</ul>
</div>
<div class="other">
want to put the div here
</div>
Any help would be appreciated.
A better solution to this problem would be to make use of the purpose made jQuery hover() function, which is designed to handle the enter & leave functions, and, providing your coding in HTML5, make use of the new data-* custom attributes to contain your "tooltip" content.
Firstly, as i've mentioned above bind the hover() function to your wrapper list items, like this:
$('.wrapper li').hover(function() {
// This handles the mouse enter function
}, function() {
// And this handles the mouse leave function
});
You can find the full documentation for the hover() function here on the jQuery API site.
Then in your HTML markup, make use of the data-* attribute by adding something along the lines of: data-tooltip-content="" to the anchors within the list items - this would look something like:
<div class="wrapper">
<ul>
<li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 1"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
<li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 2"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
<li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 3"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
</ul>
</div>
The documentation supporting the new data-* custom attributes can be found on this html5doctor website.
You can now add in some more jQuery functions between the two handlers to add a new element to the website to show the tooltip content. This can be done by using a jQuery function, however, this element needs to be appended to the page before you can access it using the DOM. This is how you'd add and remove it from the page:
$('.wrapper li').hover(function() {
// Create a new division element to contain the tooltip content
$('<div />')
// Add required attributes to the new element
.attr({
// Assign an ID so we can remove this element later
id : 'fly-tooltip',
// Assign a class to the new element for styling
class : 'tooltip'
})
// Insert the text from the current list item's data- attribute
.text( $(this).children('a').attr('data-tooltip-content') )
// Finally, append the new element to the page's body
.appendTo('body');
}, function() {
// Now call the jQuery function to remove the tooltip using the ID
$('#fly-tooltip').remove();
});
You can now customise the tooltip using the class to position accordingly. Alternativly to appending the new element to the body, you could infact append it to a specific place on your page, i.e. .appendTo('.wrapper').
Check out this JSfiddle with the code i've explained above, i've added a bit of styling to make things easier to see. Hope this helps.