JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

JavaScript

String.prototype.reverse = function () {
	return this.split('').reverse().join('');
};

var replacements = {
    "Size":"The Size of a Unit is controlled by the Color of the Unit.",
    "Color":"The Color of a Unit is a standard Setting.",
    "Time and Size": "foo"
}

var input = "Here we have something of Size 20 and Color red. it's very important that the Time and Size of the work and kept in sync. Next we have something of Size 20. And Size 40. or size 50.";
var output = input;

var tuples = [];

//putting every key/value combination into tuples
for (var key in replacements) tuples.push([key, replacements[key]]);

//sorting tuples by the length of the key, bigger values get a lower index
tuples.sort(function(a, b) {
    a = a[0];
    b = b[0];

    return a.length > b.length ? -1 : (a.length < b.length ? 1 : 0);
});

//iterating over each tuple
for (var i = 0; i < tuples.length; i++) {
    var key = tuples[i][0];
    var value = tuples[i][1];

    //usual regex
    var re = new RegExp("("+key+")(?!(?:<|.+?'>))", "g");
    
    //regex to be applied on reversed string, same concept as regex above
    var reRev = new RegExp("("+key.reverse()+")(?!(?:.+'=|>))", "g");
    
    //start of the span tag including the tooltip
    var repl = "<span class='tooltip' data-tooltip='"+value+"'>";
    //end of the span tag
    var replEnd = "</span>";
    
    //first replacement
    output = output.replace(re, repl+"$1"+replEnd);
    
    //now reverse the whole string and to a second replacement,
    //this, together with the reversed regex which uses a lookahead mimics a lookbehind (which is unfortunately not available in JS)
    output = output.reverse().replace(reRev, replEnd.reverse()+"$1"+repl.reverse()).reverse();
}

$("#output").text(output);