JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<br />
<br />
<br />
<br />
<a href="#" title="Text text text text" class="tooltip"><span title="More">CSS3     Tooltip</span></a>

CSS

.tooltip {
    display: inline;
    position: relative;
}
.tooltip:after {
    content: attr(title);
    position: absolute;
    left: 20%;
    bottom: 24px;
    width: 128px;
    background-color: yellow;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.tooltip:hover:after {
    opacity: 1;
}