I’m not sure, if I’m using the correct term, but I want to achieve a delay on the "mouseleave". The code looks like this:
jQuery( function()
{
var targets = jQuery( '[rel~=cmlist_tooltip]' ),
target = false,
tooltip = false,
title = false;
targets.bind( 'mouseenter', function()
{
target = jQuery( this );
tip = target.attr( 'title' );
tooltip = jQuery( '<div id="cmlist_tooltip"></div>' );
if( !tip || tip == '' )
return false;
target.removeAttr( 'title' );
tooltip.css( 'opacity', 0 )
.html( tip )
.appendTo( 'body' ).fadeIn();
var init_tooltip = function()
{
// more init here, but that's irrelevant for now
tooltip.css( { left: pos_left, top: pos_top } )
.animate( { top: '+=3', opacity: 1 }, 50 );
};
init_tooltip();
jQuery( window ).resize( init_tooltip );
var remove_tooltip = function() {
if ( tooltip.filter(':hover').lenght > 0 || target.filter(':hover').length > 0 ) {
setTimeout(remove_tooltip,1200);
return;
}
tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
{
jQuery( this ).remove();
});
};
target.bind( 'mouseleave', setTimeout(remove_toolip,1200) );
// this works ok, but with no delay, so I can 'catch' the hover on the tooltip itself
// target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
});
});
This gives me a "guid" number unknown error – for the line mouseleave.bind.setTimeout – in the debug console (I assume, that the interpreter cannot resolve the ‘remove_tooltip’ function correctly). How can I reference the remove_tooltip() corretly?
The goal is to enable hovering/scrolling over the tooltip, so the tooltip window shouldn’t disappear on ‘mouseleave’ instantly – but want to keep that option too with a delay.
Demo in JSFiddle: https://jsfiddle.net/raqp0j4m/
2
Answers
This is a very simplified demo showing how to correctly approach the binding of a function to the
mouseleave
event.After hovering the square gray area, you’ll see the event handler kick in on mouse leave and the delayed action performed as expected:
Here is a more complete version not using jQuery at all.
No need for jQuery anymore