jquery tooltip mouseout mouseover
Question
I have a Problem. The following Tooltip working great, but there is a Problem. When i go with the mouse to the right side, the cursor is faster then the tooltip and will hover it. This will hide and show the Cursor for a split Second.
http://gabibyte.zxq.net/jquery_tooltips/example.html
// !REMEMBER TO INCLUDE JQUERY IN YOUR PAGE - IF YOU DON'T KNOW HOW, JUST INCLUDE THE LINE OF CODE BELOW IN THE <HEAD>...</HEAD> PART OF YOUR PAGE
/* <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> */
//----------------------------------------------CONFIGURATION
var offset=15; //Distance between tooltip and cursor
var fadeInSpeed=600; //Speed of the Fade-IN effect in miliseconds
var fadeOutSpeed=200; //Speed of the Fade-OUT effect in miliseconds
var clearQueue = true; //If set to false, if you hover over many elements fast, the events will stack up
var gotoEnd= true; //If set to false, if you hover over many elements fast, the events will stack up
//---------------------------------------------GLOBAL VARIABLES
var mouseX,mouseY;
$(document).ready(function(){
//-----------------------------------------------MOUSE EVENTS
$(document).mousemove(function(e){
mouseX=e.pageX+offset;
mouseY=e.pageY;+offset
$('.floating').css('top',mouseY);
$('.floating').css('left',mouseX);
});
//------------------------------------------------HOVER EVENTS
$('.hastooltip').hover(function () {
var selector ="#"+ $(this).attr('tooltip');
//alert(selector);
//$(selector).stop(clearQueue , gotoEnd)
$(selector).fadeIn(250,function () {});
},function () {
var selector ="#"+ $(this).attr('tooltip');
$(selector).fadeOut(fadeOutSpeed,function () {});
}
);
});
Is there any way to say for onmouseout "if hover toolbox do nothing else fadeOut".
2 answers
solution1
0 2011-08-11 20:40:25
use .mouseout()
solution2
0 2011-08-11 20:56:27
You can use .setTimeout() for the stuff you want to happen on the hover off. Then have a hover for your tooltip that cancels that timeout (using .clearTimeout() ). You'll probably want the same setTimeout/clearTimeout on the element and the tooltip hover offs/ons (respectively), so that if someone returns their mouse to either of them, the hover off doesn't happen.
So if you have a 2-second timeout, the timer will start when someone hovers off, but as long as someone hovers from the element to the tooltip within 2 seconds it'll get cancelled.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.