JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<div id="test">Size: 40; Color: 30; <b>Bold Size Test:</b> 20; <span>Another Size Test: 10</span></div>
<p>See console</p>

CSS

.tooltip {
    background-color: yellow;
}

JavaScript

function replaceTextWithSpan(node, text, options) {
    var searchText = text.toLowerCase(),
        currentNode = node,
        matchIndex,
        newTextNode,
        newSpanNode;
    while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
        newTextNode = currentNode.splitText(matchIndex);
        currentNode = newTextNode.splitText(searchText.length);
        newSpanNode = document.createElement("span");
        newSpanNode.className = "tooltip";
        newSpanNode.setAttribute("data-tooltip", options["data-tooltip"]);
        currentNode.parentNode.insertBefore(newSpanNode, currentNode);
        newSpanNode.appendChild(newTextNode);
    }
}
$(function () {
    $("#test, #test *").contents().filter(function () {
        return this.nodeType == this.TEXT_NODE;
    }).each(function () {
        replaceTextWithSpan(this, "Size", { "data-tooltip": "The Size of a Unit is controlled by the Color of the Unit." });
    });
    $("#test, #test *").contents().filter(function () {
        return this.nodeType == this.TEXT_NODE;
    }).each(function () {
        replaceTextWithSpan(this, "Color", { "data-tooltip": "The Color of a Unit is a standard Setting." });
    });
    console.log($("#test").html());
});