I work with a website that has a rich text box which gives direct access to the underlying HTML code. I can edit the HTML code, but when I save it, the website intervenes. <style> elements disappear, but <div> and <span> elements remain and seem to keep all their attributes.
I would like a certain <span> element to show a tooltip when hovered over. I've considered using the title attribute (it works), but it's not flexible enough for my need.
Is it possible (and how) to implement a tooltip like shown here without a <style> element, using only attributes of <div> and <span> elements? I was thinking of attributes such as style, onmouseover, and onmouseout, but feel free to suggest other ones as you see fit.
So assuming you have no way to include seperate css or js on page load I came up with something that works with only html:
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div style="position: relative;
display: inline-block;
border-bottom: 1px dotted black;"
onmouseover="tooltip.style.visibility='visible'"
onmouseout="tooltip.style.visibility='hidden'">Hover over me
<span id="tooltip" style="visibility: hidden;">
<span style="width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;">Tooltip text</span>
<span style="content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;"></span>
</span>
</div>
With this you can just add a hovertip attribute to any element like <p hovertip="tip">hover this</p>.
var tooltip = document.getElementById("tooltip");
document.addEventListener("mousemove", (e) => {
elementMouseIsOver = document.elementFromPoint(e.clientX, e.clientY);
if (elementMouseIsOver !== null) {
if (elementMouseIsOver.getAttribute("hovertip") == null) {
tooltip.style.display = "none";
tooltip.innerText = "";
} else {
tooltip.style.display = "block";
tooltip.innerText = elementMouseIsOver.getAttribute("hovertip");
};
};
tooltip.style.top = e.clientY + "px";
tooltip.style.left = e.clientX + "px";
});#tooltip {
border-radius: 5px;
padding: 5px;
background-color: darkslategray;
opacity: 0.9;
color: white;
position: fixed;
left: 0px;
top: 0px;
display: none;
pointer-events: none;
}<div id="tooltip"></div>
<textarea hovertip="asdb"></textarea><br>
<p>wqe qwej jiofdas jare oias. dgf <span hovertip="the tooltip" style="text-decoration: underline;">gfrsd</span> sfgd ho, sfdg sdfr ert asd.</p>