I have the following problem. I'm working on a simple jQuery tooltip and now I'm dealing with something strange to me. Every time I mouseover the element, events for mouse over and mouse out are triggered both - so the tooltip disappears (but if I keep hand over, it does a lot of blinks in one sec). There's my code.
var hint = $('<div id="hint-wrap"><div id="hintbox-top"><div id="hintbox-bottom"><div id="hintbox-topleft"><div id="hintbox-bottomleft"><div id="hint-innerwrap"><div id="hint"></div></div></div></div></div></div></div>'); // Funny I know :-D
hint.hide();
$('body').append( hint ); // I append it
$('.hashint').hover(function(e){
// Set position to cursor's
hint.css( 'left', e.pageX );
hint.css( 'top', e.pageY - 60 );
// animated append
hint.css( 'opacity', 0.2 );
hint.show();
hint.animate( { 'opacity' : 1 }, 100 );
// set text
$( "#hint" , hint).html( $( '#' + $(this).attr( 'id' ) + '-hint' ).html() );
},
function(){ // there is the problem
hint.hide();
});
And the HTML:
<div id="usernamelabel-hint" class="hinttext">Lorem Ipsum is simply dummy text of the printing and type.Lorem. <a href="#">Sign up!</a></div> <!-- This is hint text (and code) -->
<p><label><span class="hashint" id="usernamelabel">Username</span><span class="asterisk">*</span></label> <!-- ... stuff --> </p>
Please, does anybody know why the mouse out event is still triggering and hiding my box?
Thanks a lot, Ondrej
could it be, that your tooltip-div is overlaying your trigger-div? In that case the appearing tooltip-div triggers the mouseleave of the trigger-div.. At least that's what happend to me some divs ago. I solved that problem by overlaying everything with an invisible trigger-div - not so beautiful, but worked for me..