JSFiddle - React, Tailwind, and code Playground

by qolami

HTML

<a class="tooltip"  data-tip="TOOLTIP FOR TEXT" href="#">Show a tooltip</a>
<span class="tooltip" data-tip="show a tooltip for image">
    <img alt="show a tooltip for image" src="http://www.isc.tamu.edu/~lewing/linux/sit3-shine.7.gif" height="150" />
</span>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint vitae fuga quo distinctio nobis illo sequi alias nihil soluta reiciendis facilis quos voluptas eum inventore harum laborum provident iusto enim!</p>

CSS

.tooltip {
    position: relative;
}

.tooltip:after {
    content: attr(data-tip);
    font-size: 10px;
    position: absolute;
    bottom: 9999px;
    left: 50%;
    z-index: 90099;
    white-space: nowrap;
    background:#000;
    color:#e0e0e0;
    padding:0px 7px;
    line-height: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.tooltip:hover:after {
    opacity: 1;
    bottom: -35px;
}