JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centered">
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
<span data-tooltip="hello 2" class="ok">My Link</span><br/>
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 100%;
    font-family: helvetica;
    font-weight: normal;
    font-style: normal;
}
div.centered {
    font-size: 5vh;
}
span.ok {
    position: relative;
}
span.ok:after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    transform: translateX(-25%);
    z-index: -1;
    color: rgba(0, 0, 0, 0);
    -webkit-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
span.ok:hover:after {
    color: rgba(0, 0, 0, 1)
}
span.ok:hover {
    color: rgba(0, 0, 0, 0);
}
span {
    margin: 0 auto;
    display: table;
    font-size: 5vh;
    line-height: 1;
    white-space: nowrap;
}