JSFiddle - React, Tailwind, and code Playground

by Yuriy Tarabanko

HTML

<div title="some title" class="tooltip">Text containing tooltip</div>
<div title="some title" class="tooltip">Text containing tooltip</div>
<div title="some title" class="tooltip">Text containing tooltip</div>
<button id="show">Show tips</button>

CSS

.tooltip {
    margin-top: 10px;
    position: relative;
}
.show .tooltip[title]:after {
    display: block;
    position: absolute;
    content: attr(title);
    top: -10px;
    left: 20px;
    border: 1px solid black;
    font-size: 10px;
    
}

JavaScript

document.getElementById('show').addEventListener('click', function(){
    document.body.classList.toggle('show')
}, false)