JSFiddle - React, Tailwind, and code Playground

HTML

<button tooltip="Text for the tooltip">
    test
</button>
<br>
<button tooltip="HEY  :D">test2</button>

CSS

button {
    margin-left:50px;
}
[tooltip]:before {            
    position : absolute;
    content : attr(tooltip);
    opacity : 0;
    background-color: black;
    color: white;
    transform:translateX(-50%); //NOT IN IE 8
    padding: 2px 10px;
}

[tooltip]:hover:before {
    pointer-events: none;
    opacity : 1;
    margin-top:10px;
    margin-left:10px;
}