<div class="tooltip" data-tooltip="This is a tip">Hover me for a tip!</div>
.tooltip {
font-size: 4rem;
margin: 5rem;
position: relative;
}
.tooltip::before {
content: "";
position: absolute;
top: -0.4em;
left: 0.5em;
width: 0;
height: 0;
border-style: solid;
border-width: 0.4em 0.4em 0 0.4em;
border-color: #e5e5e5 transparent transparent transparent;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
top: -2.2em;
font-size: 0.5em;
background: #e5e5e5;
border-radius: 0.5em;
padding: 0.25em 0.5em;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.