JSFiddle - React, Tailwind, and code Playground

HTML

<table class="cart"> 
    <tr> 
        <th id="pos">Pos</th> 
        <th id="name">Product</th> 
        <th id="price">Price</th> 
    </tr> 
    <tbody> 
        <tr>
            <td>1</td>
            <td>
                <a href="productdetails.htm" class="hasTooltip">Flatscreen 
                    <span>New visual experience!</span>
                </a>
            </td>
            <td>19.99</td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <a href="productdetails.htm" class="hasTooltip">Headset 
                    <span>Inject music directly into your ears!</span>
                </a>
            </td>
            <td>19.99</td>
        </tr>
    </tbody> 
</table>

CSS

.cart {
    width: 100%;
}

.hasTooltip span {
    display: none;
    color: #000;
    text-decoration: none;
    padding: 3px;
}

.hasTooltip:hover span {
    display: block;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #CCC;
    margin: 2px 10px;
}