There is a tooltip for several images; you need to add setTimeout so that the tooltip doesn’t appear immediately.

/* tooltip */ this.screenshotPreview = function() { xOffset = 370; yOffset = -280; // center s_width = 624; s_min = 300; function set_x ( mouse_y ) { if(mouse_y<375) // top margin { xOffset=-35; } else { xOffset=315; // должен быть больше "style=\'height: 300px" } } $('a.screenshot-preview').hover( function(e) { this.t = this.title; this.title = ''; var c = ( this.t !== '' ) ? '<br />' + this.t : ''; $('body').append( '<p id="screenshot"><img src="' + $(this).attr('data-preview') + '" alt="url preview" style=\'width: 590px; height: 300px;\' />'+ c +'</p>' ); var document_width = $(document).width(), remander = document_width - ( ( e.pageX + yOffset ) + s_width ); if ( e.pageX <= s_min ) { $('#screenshot').css( 'left', '0px' ); } else { if ( remander <= -1 ) { $('#screenshot').css( 'left', ( document_width - s_width ) + 'px' ); } else { $('#screenshot').css( 'left', ( e.pageX + yOffset ) + 'px' ); } } set_x( e.clientY ); if ( e.clientY <= xOffset ) { jQuery('#screenshot').css( 'top', ( e.pageY + ( xOffset ) ) + 'px' ); } else { $('#screenshot').css( 'top', ( e.pageY - xOffset ) + 'px' ); } $('#screenshot').fadeIn( 'fast' ); }, function() { this.title = this.t; $("#screenshot").remove(); } ); $('a.screenshot-preview').mousemove( function(e) { var document_width = $(document).width(), remander = document_width - ( ( e.pageX + yOffset ) + s_width ); if ( remander >= 1 && e.pageX > s_min ) { $('#screenshot').css( 'left', ( e.pageX + yOffset ) + 'px' ); } set_x( e.clientY ); $('#screenshot').css( 'top', ( e.pageY - xOffset ) + 'px' ); } ); }; // starting the script on page load $(document).ready(function(){ screenshotPreview(); });

Demo https://jsfiddle.net/n3khxp7s/3/

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

Alternatively, you can wrap blocks of code located in the functions of the hover method with a timeout

 /* tooltip */ this.screenshotPreview = function() { xOffset = 370; yOffset = -280; // center s_width = 624; s_min = 300; timeout = null; function set_x(mouse_y) { if (mouse_y < 375) // top margin { xOffset = -35; } else { xOffset = 315; // должен быть больше "style=\'height: 300px" } } $('a.screenshot-preview').hover( function(e) { $this = this; this.t = this.title; this.title = ''; var c = (this.t !== '') ? '<br />' + this.t : ''; timeout = setTimeout(function() { $('body').append('<p id="screenshot"><img src="' + $($this).attr('data-preview') + '" alt="url preview" style=\'width: 590px; height: 300px;\' />' + c + '</p>'); var document_width = $(document).width(), remander = document_width - ((e.pageX + yOffset) + s_width); if (e.pageX <= s_min) { $('#screenshot').css('left', '0px'); } else { if (remander <= -1) { $('#screenshot').css('left', (document_width - s_width) + 'px'); } else { $('#screenshot').css('left', (e.pageX + yOffset) + 'px'); } } set_x(e.clientY); if (e.clientY <= xOffset) { jQuery('#screenshot').css('top', (e.pageY + (xOffset)) + 'px'); } else { $('#screenshot').css('top', (e.pageY - xOffset) + 'px'); } $('#screenshot').fadeIn('fast'); }, 500); }, function() { clearTimeout(timeout); this.title = this.t; $("#screenshot").remove(); } ); $('a.screenshot-preview').mousemove( function(e) { var document_width = $(document).width(), remander = document_width - ((e.pageX + yOffset) + s_width); if (remander >= 1 && e.pageX > s_min) { $('#screenshot').css('left', (e.pageX + yOffset) + 'px'); } set_x(e.clientY); $('#screenshot').css('top', (e.pageY - xOffset) + 'px'); } ); }; // starting the script on page load $(document).ready(function() { screenshotPreview(); });

https://jsfiddle.net/om9bdtwy/