Display helpful tooltips using only CSS.
Usage
<span
class=”tooltip”
data-tooltip=”Copied successfully”>
Hover me
</span>
.tooltip {
position: relative;
cursor: pointer;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: .3s;
white-space: nowrap;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
