var styles = `
    #imageAltTip {
      position: fixed;
      top: 0;
      left: 0;
      min-height: 2rem;
      height: fit-content;
      width: fit-content;
      background: black;
      color: white;
      display: none;
      z-index: 99999;
      padding: 5px 1rem;
    }

  #imageAltTip.alt-ToolTipShow {
    display: block;
  }
`

var styleSheet = document.createElement("style")
styleSheet.textContent = styles
document.head.appendChild(styleSheet);

altTip = document.createElement("div");
altTip.setAttribute("id", "imageAltTip");
altTip.innerHTML = "";
document.body.append(altTip);

var imageNodes = document.getElementsByTagName("img");
for (var i = 0; i < imageNodes.length; i++) {
  document.images[i].addEventListener(
    "mouseover",
    function (e) {
      altTip.className = "";
    }, false );
}


for (var i = 0; i < imageNodes.length; i++) {
  document.images[i].addEventListener(
    "mousemove",
    function (e) {
      altTip.className = "alt-ToolTipShow";
      altTip.style.left = (e.clientX) + "px";
      altTip.style.top = e.clientY + "px";

      try {
        altTip.innerHTML = e.srcElement.alt;
      } catch(e) {
        try {
          altTip.innerHTML = e.srcElement.title;
        } catch(e) {
          altTip.innerHTML = "No alt text";
        }
      }
    },
    false,
  );
}