JSFiddle - React, Tailwind, and code Playground

by karlhorky

HTML

<div class="element">
    element
    
    <div class="tooltip">tooltip</div>
</div>

SCSS

.element {
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 3px 5px;
    position: relative;
    display: inline-block;
}

.tooltip {
    transition: .3s opacity;
    opacity: 0;
    background: black;
    color: white;
    display: block;
    position: absolute;
    bottom: -15px;
    
    .element:hover & {
        opacity: 1;
    }
}