Javascript "onMouseOver" for kids?
I can't tell if this is the result of using jQuery, but this is what I'm trying to do:
<div class="info" style="display: inline;"
onMouseOut="$(this).children('div').hide('normal');"
onMouseOver="$(this).children('div').show('normal');"
>
<img src="images/target.png">
<div class="tooltiptwo" id="tooltip"
style="font-weight: normal; font-size: 0.8em;" >TOOLTIP TEXT</div>
</div>
For anyone familiar with basic CSS and jQuery, I'm trying to add a simple animation to my tooltips. The problem is with the animation running. It looks like when the animation happens, if the user hovers over the tooltip, the animation goes into a show and hide loop until the user pushes the mouse away. This is an unwanted effect as I only want the animation to go away only once, when the mouse leaves the parent div. I have positioned my CSS so that the tooltip is away from the parent div, but no matter what actions should only be triggered on the parent and not on any of its children.
So, basically, how could I achieve this? I want my hover / out state on my parent to call a function (animation) on the children of that parent without the hover / out state of the children doing nothing. It seems that the normal onMouseOver and onMouseOut method gets triggered even for the children of the parent this method belongs to, which causes some rather unwanted effects.
Note that I am new to jQuery (although its awesome so far, I want to cover my site in my goodness if I can) and if there is a better way to achieve the hover / out state with jQuery, I probably don’t know about them ... ^ _ ^
thank
source to share
edit : this is actually a much better solution ( credit ):
$('.info').bind('mouseenter', function() {
$('div', this).show('normal');
});
$('.info').bind('mouseleave', function() {
$('div', this).hide('normal');
});
// hide the tooltip to start off
$('.info div').hide();
edit2 : in response to comments, I think I would suggest structuring your HTML differently, or bind an event to the sibling element (image):
<div class="info">
<img src="stuff.jpg" />
</div>
<div class="tooltip"></div>
or snapping to an image:
$('.info img').bind('mouseenter', function() { etc... });
$('.info img').bind('mouseleave', function() { etc... });
source to share
Have you followed this tutorial ?
Specifically the mousemove part where it constantly sets the left and top positioning values to align the tooltip next to the cursor. X and Y coordinates are called via .pageX and .pageY. And it also adds a slight 15 px offset, so the tooltip is not directly under the cursor.
This way the mouse cannot be over the tooltip, not even the fade phase. Hence the infinite loop
source to share
Bind it to the parent div and use stopPropagation so that it doesn't bind to your tooltip. Like this:
[code] $ ('. info'). bind ('mouseover', function (e) {e.stopPropagation (); $ (this> 'div'). show ('normal');});
$ ('. info'). bind ('mouseout', function () {$ (this> 'div'). hide ('normal');});
// hide the tooltip to start $ ('. info div'). hide (); [/Code]
However, I also use pageX and pageY to make my tooltips move with the cursor.
source to share