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/
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:
jQuery( function()
{
const remove_tooltip = function() {
console.log('...tooltip removed!');
};
const target = $('.area');
//using .on instead of .bind
//https://api.jquery.com/bind/
//...as of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged...
target.on( 'mouseleave', ()=>{console.log('mouse left...'); setTimeout(remove_tooltip,1200)} );
});
.area{
height: 10em;
width: 10em;
background: #ccc;
border: dashed 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="area">
</div>