JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span title="tooltip for test">test</span>

<span title="tooltip for test2">test2</span>

CSS

/* Sample styling */
 style-tip {
    background: #fff;
    border: 1px solid #666;
    padding: 5px 10px;
}

JavaScript

(function () {
    "use strict";
    
    var tooltipDelay = 500;

    document.registerElement("style-tip");
    var timer = null;
    document.body.addEventListener("mouseout", function() {
        window.clearTimeout(timer);
    });
    document.body.addEventListener("mousemove", function (e) {
        var el = e.target;
        if (el != document.body && (el.hasAttribute("title") || el.hasAttribute("data-styletip"))) {

            if (el.title) {
                el["tt-title"] = el.title;
                el["tt-show"] = function (pos) {
                    var tip = document.createElement("style-tip");
                    tip.innerText = el["tt-title"];
                    tip.style.zIndex = 9e9;
                    tip.style.pointerEvents = "none";
                    tip.style.position = "absolute";
                    tip.style.left = pos.x + "px";
                    tip.style.top = pos.y + "px";
                    document.body.appendChild(tip);
                    el["tt-tip"] = tip;
                    this.addEventListener("mouseout", el["tt-destroy"]);
                };
                el["tt-destroy"] = function () {
                    if (el["tt-tip"]) {
                        document.body.removeChild(el["tt-tip"]);
                        delete el["tt-tip"];
                    }
                };
                el.removeAttribute("title");
            }
            el.setAttribute("data-styletip", true);

            clearTimeout(timer);
            timer = window.setTimeout(function () {
                el["tt-destroy"]();
                el["tt-show"]({
                    x: e.pageX,
                    y: e.pageY
                });
            }, tooltipDelay);
        }
    });

})();