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>
    <a href="#" class="tooltip">Tooltip<span>what a <u>rainy</u> day.</span></a>

CSS

.tooltip {
    outline:none;
}
.tooltip strong {
    line-height:30px;
}
.tooltip:hover {
    text-decoration:none;
}
.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    margin-top:30px;
    margin-left:-160px;
    width:240px;
    line-height:16px;
}
.tooltip:hover span {
    display:inline;
    position:absolute;
    border:2px solid #FFF;
    color:#EEE;
    background:#000;
}
.tooltip span {
    border-radius:2px;
    box-shadow: 0px 0px 8px 4px #666;
    opacity: 0.8;
}
.pos {
    font-weight: bold;
    display: inline;
    position: relative;
    text-decoration: none
}
.pos:hover:before {
    display:inline;
    border: solid;
    border-color: #333 transparent;
    border-width: 0px 6px 6px 6px;
    bottom: -20px;
    content:"";
    left: 50%;
    position: absolute;
    z-index: 99;
    font-style: normal;
}