JSFiddle - React, Tailwind, and code Playground

HTML

<b>Example 1: Not Working</b><br/>
<table><tr>
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span>
</tr></table>

<b>Example 2: Working</b><br/>
<span class="tip"><table><tr><td>Working Tip</td><span class="tooltip">Tip</span></tr></table></span>

CSS

.tip{
    position:relative;
}

.tip span.tooltip{
    display:none;
    background:#ff5112;
    border:1px solid #9C0;
}

.tip:hover span.tooltip{
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center
    }