jQuery(document).ready(function($) { const TIP_ATTR = 'data-tip-text'; const SELECTOR = '.az-tip, [title]'; const EXCLUSIONS = '.bg_bibrefs, .bg_bibrefs *'; const TOP_MARGIN = 50; const BOTTOM_MARGIN = 20; const SIDE_MARGIN = 20; let currentTarget; let hideTip = ()=>{ let target = $('['+TIP_ATTR+']'); target.attr('title', target.attr(TIP_ATTR)).removeAttr(TIP_ATTR); $('.tooltip').remove(); $(currentTarget).off('mouseleave click', hideTip); currentTarget = false; }; // Tooltip only Text $('body').on("mousemove", function(e) { let target = $(e.target).closest(SELECTOR).not(EXCLUSIONS); let title = target.attr('title'); let tipText = target.attr(TIP_ATTR); let href = target.attr('href'); if( !target.length ){ if(e.target.matches('body, html')) hideTip(); return; } // Hover over titled if(currentTarget !== target[0]){ hideTip(); target.attr(TIP_ATTR, title).removeAttr('title'); $(href ? '
' : ''+title+'
').appendTo('body').fadeIn(); currentTarget = target[0]; setTimeout(()=>target.on('mouseleave click', hideTip), 20); } let rect = target[0].getBoundingClientRect(); let ttRect = $('.tooltip')[0].getBoundingClientRect(); var posX = rect.right + 2; //Get X coordinates var posY = rect.top - ttRect.height - 2; //Get Y coordinates let right = posX + ttRect.width; let bottom = posY + ttRect.height; let bottomLimit = window.scrollY + window.innerHeight - BOTTOM_MARGIN; if( right > window.innerWidth - SIDE_MARGIN ) posX = rect.left - ttRect.width - 2; //switch left if( posX bottomLimit ) posY -= bottom - bottomLimit + BOTTOM_MARGIN; $('.tooltip').css({ top: window.scrollY + posY, left: window.scrollX + posX }); }); //hide on click $('body').click(function(e) { if(e.target.tagName == "A"){ hideTip(); } }); $('html body').on('touchmove', hideTip); });