первый код на больную голову
<style>
.hint {
background: lightgray;
position: fixed;
border-radius: 0 1em;
opacity: 0.9;
padding: 0.3em;
}
.dn {
display: none;
}
</style>
<div>div</div>
<input>
<button>button</button>
<p>paragraph</p>
<a href="#">link</a>
<script>
function addWildHint(text) {
var hint = document.createElement("div");
hint.classList.add("hint", "dn");
hint.innerHTML = text;
this.parentNode.insertBefore(hint, this);
this.addEventListener("mouseenter", function (event) {
hint.classList.toggle("dn", false);
hint.style.top = event.clientY + 3 + "px";
hint.style.left = event.clientX + 3 + "px";
});
this.addEventListener("mouseleave", function () {
hint.classList.toggle("dn", true);
});
}
//usage
!addWildHint.bind(document.querySelector("div"), "div hint")();
~addWildHint.bind(document.querySelector("input"), "input hint")();
+addWildHint.bind(document.querySelector("button"), "button hint")();
-addWildHint.bind(document.querySelector("p"), "p hint")();
void addWildHint.bind(document.querySelector("a"), "a hint")();
</script>