JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<style>

span[data-tooltip] {
    border-bottom: 1px dotted #aaa;
    position: relative;
    cursor: pointer;
}

span[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #fff;
    border-radius: 3px;
    margin-left: -10px;
    margin-top: -30px;

    -webkit-animation: target .5s linear;
    -moz-animation: target .5s linear;
}

@-webkit-keyframes target{
    from{opacity:0}
    to{opacity:1}
}

@-moz-keyframes target{
    from{opacity:0}
    to{opacity:1}
}

</style>

<br><br>

<p>
  Megan Fox <span data-tooltip="without doubt">is</span> hot.
</p>