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,
);
}
Comments