CODEWITHSUNDEEP
javascripthtmlcssattributes
Orius
Orius

Reputation: 1093

HTML tooltip using only div/span/etc. attributes (onmouse.../style/etc.)

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.

Upvotes: 0

Views: 56

Answers (2)

Tim Lind
Tim Lind

Reputation: 160

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>

Upvotes: 1

GiantBooley
GiantBooley

Reputation: 308

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>

Upvotes: 0

Related Questions