JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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