<!– 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>