JSFiddle - React, Tailwind, and code Playground

HTML

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<br><br>

<span class="rnd">[<span class="pos">suffix</span>] Some random text...</span>

CSS

.tooltip{
   			display: inline;
    		position: relative;
            text-decoration: none
		}
		
		.tooltip:hover:after{
    		background: #333;
    		background: rgba(0,0,0,.8);
    		border-radius: 5px;
    		bottom: 26px;
    		color: #fff;
    		content: attr(data-tooltip);
    		left: 20%;
    		padding: 5px 15px;
    		position: absolute;
    		z-index: 98;
    		width: 220px;
            font-style: normal;
		}
		
		.tooltip:hover:before{
    		border: solid;
    		border-color: #333 transparent;
    		border-width: 6px 6px 0 6px;
    		bottom: 20px;
    		content: "";
    		left: 50%;
    		position: absolute;
    		z-index: 99;
            font-style: normal;
		}
.pos { font-weight: bold; }

JavaScript

var abbrs_json = [{ "abbr": "suffix", "exp": "An affix that follows the element to <u>which</u> it is added, as <i>-ly</i>  in <i>kindly</i>."}];
    var abbrs = document.getElementsByClassName("pos");
    var hover = function () {
        if (this.className.indexOf("tooltip") != -1)
            return;

        this.className = this.className + " tooltip";
        for (i = 0; i < abbrs_json.length; i++)
        {
            if (abbrs_json[i].abbr == this.innerHTML)
            {
                this.setAttribute('data-tooltip', this.innerHTML+": "+abbrs_json[i].exp);
            }
        }
    };

    for (var i = 0; i < abbrs.length; i++) {
        abbrs[i].onmouseover = hover;
    }