Additional Content on Hover or Focus
<html>
<head>
<style> #additional { background-color: azure; border: thin solid gray; width: 10em; } </style> <script> function setup() { document.getElementById("info").addEventListener( "focus",display); document.getElementById("info").addEventListener( "mouseover",display); document.getElementById("info").addEventListener("blur",hide); document.getElementById("info").addEventListener("mouseout",hide); document.getElementById("additional").addEventListener("mouseout",hide); document.getElementById("info").addEventListener("keyup",keyListener); }
function keyListener(e) {
if (e.code == "Escape") document.getElementById("additional").setAttribute("hidden","hidden"); }
function hide(e) { if (e.relatedTarget && e.relatedTarget.id != "additional") document.getElementById("additional").setAttribute("hidden","hidden"); if (e.target.id == "additional" && e.relatedTarget && e.relatedTarget.id != "info") document.getElementById("additional").setAttribute("hidden","hidden"); }
function display(e) { document.getElementById("additional").removeAttribute("hidden"); }
</script>
</head> <body onload="setup();">
<button id="info" aria-describedby="additional"> Information </button> <button> Do nothing</button>
This site provides as-is examples
</body>
