JSFiddle - React, Tailwind, and code Playground

HTML

<div id='tooltip'></div>

<div>
    <h1>Ejemplo Tooltip SVC</h1>
    <a href='#' onmouseover="showTooltip(this,'tooltip para el primer link')" onmouseout="hideTooltip()">link uno</a>
    <a href='#' onmouseover="showTooltip(this,'tooltip para el segundo link')" onmouseout="hideTooltip()">link dos</a>
    <a href='#' onmouseover="showTooltip(this,'tooltip para el tercer link')" onmouseout="hideTooltip()">link tres</a>
</div>

CSS

#tooltip{
   display:none;
    position:absolute;
}

a{
    display: block;
    width: 85px;
}

JavaScript

function showTooltip(parent, text) {
    var pos = $(parent).offset();
    var width = $(parent).width();
    $('#tooltip').css({
        "left": (pos.left + width) + "px",
        "top": pos.top + "px"
    }).html(text).show();
}

function hideTooltip(){
    $('#tooltip').hide();
}