Example image popup on hover

https://www.reddit.com/r/Anki/comments/usj29b/image_popup_when_hover_over_text_element/

by OjisanSeiuchi

HTML

<html>
  <h1>Image popup</h1>
  <p>
    Hover over the definition for an image to appear.
  </p>

  <body>
    <div>

      <p>The definition is: <span id="def" class="word-def">a potion made from unicorn hooves</span>
      </p>
    </div>
  </body>

</html>

CSS

.word-def {
    font-style: oblique;
    
}

JavaScript

$(document).ready(function() {
  let defSpan = $("#def")
  defSpan.hover(function() {
    showImage('def', 'https://picsum.photos/200');
  });
  defSpan.mouseout(function() {
    hideImage('def')
  });
});

function showImage(elemId, imgSrc) {
  const elem = document.getElementById(elemId);
  const popImage = new Image();
  popImage.src = imgSrc;
  popImage.style.position = "absolute";
  popImage.style.zIndex = "1";
  elem.appendChild(popImage);
}

function hideImage(elemId) {
  const elem = document.getElementById(elemId);
  while (elem.childElementCount > 0) {
    elem.removeChild(elem.lastChild);
  }
}

function nada() {
  return
}