JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<span data-title="Esta é uma informação para a nossa dica" class="tooltip">css3 tooltip</span>

CSS

.tooltip{
    display: inline;
    position: relative;
    margin-top: 50px;
}
.tooltip:hover:after{
    padding: 5px 15px;
    width: 220px;
    border-radius:5px;
    background: rgba(0,0,0,.8);
    content: attr(data-title);
    position: absolute;
    left: 20%;
    bottom: 26px;
    z-index: 98;
    color: #fff;
}
.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0px 6px;
    content: "";
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 98;
}