<!– That file is not particularly elegant. This will need a refactor at some point. –> <style>
/* leave id for opacity toggle */ #tooltip-wrapper { opacity: 0; transition: opacity 100ms; }
</style>
<div style=“opacity: 0; display: none;” class=“tooltip-wrapper” id=“tooltip-wrapper”>
<div id='tooltip-content'></div>
</div> <iframe style=“display: none; height: 0; width: 0;” id=“hover-preview-iframe” src=“”></iframe>
<script>
var opacityTimeout; var contentTimeout; var transitionDurationMs = 100; var iframe = document.getElementById('hover-preview-iframe'); var tooltipWrapper = document.getElementById('tooltip-wrapper'); var tooltipContent = document.getElementById('tooltip-content'); function hideTooltip() { opacityTimeout = setTimeout(function() { tooltipWrapper.style.opacity = 0; contentTimeout = setTimeout(function() { tooltipContent.innerHTML = ''; tooltipWrapper.style.display = 'none'; }, transitionDurationMs + 1); }, transitionDurationMs) } function showTooltip(event) { var elem = event.target; var elem_props = elem.getClientRects()[elem.getClientRects().length - 1]; var top = window.pageYOffset || document.documentElement.scrollTop; if (event.target.host === window.location.host) { iframe.src = event.target.href; iframe.onload = function() { tooltipContent.innerHTML = iframe.contentWindow.document.querySelector('.main-content').innerHTML; tooltipWrapper.style.display = 'block'; setTimeout(function() { tooltipWrapper.style.opacity = 1; }, 1); }; tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px"; if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) { tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px"; } else if ((window.innerHeight - elem_props.top) > (tooltipWrapper.offsetHeight)) { tooltipWrapper.style.top = elem_props.top + top + 35 + "px"; } if ((elem_props.left + (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) { tooltipWrapper.style.left = "10px"; } else if ((document.body.clientWidth - elem_props.left - (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) { tooltipWrapper.style.left = document.body.clientWidth - tooltipWrapper.offsetWidth - 20 + "px"; } } } function setupListeners(linkElement) { linkElement.addEventListener('mouseleave', function(_event) { hideTooltip(); }); tooltipWrapper.addEventListener('mouseleave', function(_event) { hideTooltip(); }); linkElement.addEventListener('mouseenter', function(event) { clearTimeout(opacityTimeout); clearTimeout(contentTimeout); showTooltip(event); }); tooltipWrapper.addEventListener('mouseenter', function(event) { clearTimeout(opacityTimeout); clearTimeout(contentTimeout); }); }
</script>