CSS Advanced
CSS Tooltips
A tooltip is a small popup that appears when the user hovers an element. You can build one with pure CSS: hide the tooltip text by default, position it absolutely near the trigger, and reveal it on hover. A CSS triangle adds the pointing arrow.
The basic structure
Wrap the trigger in a container set to position: relative, and place the tooltip text inside as an absolutely positioned child that is hidden until hover.
<span class="tip">Hover me
<span class="tip-text">Helpful hint</span>
</span>.tip { position: relative; }
.tip-text {
visibility: hidden; opacity: 0;
position: absolute;
transition: opacity .2s;
}
.tip:hover .tip-text { visibility: visible; opacity: 1; }<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:grid; place-items:center; height:220px; background:#f1f5f9; }
.tip { position:relative; background:#6366f1; color:#fff;
padding:10px 18px; border-radius:8px; cursor:help; font-weight:bold; }
.tip-text {
visibility:hidden; opacity:0;
position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
background:#0f172a; color:#fff; padding:8px 12px; border-radius:6px;
white-space:nowrap; font-size:13px; font-weight:normal;
transition:opacity .2s;
}
.tip-text::after { /* the arrow */
content:""; position:absolute; top:100%; left:50%;
transform:translateX(-50%);
border:6px solid transparent; border-top-color:#0f172a;
}
.tip:hover .tip-text { visibility:visible; opacity:1; }
</style>
</head>
<body>
<span class="tip">Hover for help
<span class="tip-text">This is a pure CSS tooltip!</span>
</span>
</body>
</html>The arrow trick
The little triangle is a zero-size pseudo-element with thick transparent borders; only one border side is given a color, which the browser renders as a triangle pointing away from the colored side.
.arrow::after {
content: "";
border: 6px solid transparent;
border-top-color: #0f172a; /* points downward */
}Positioning on any side
Change the tooltip's position and arrow border to place it above, below, left, or right of the trigger.
| Placement | Tooltip position | Colored arrow border |
|---|---|---|
| Top | bottom: 130% | border-top-color |
| Bottom | top: 130% | border-bottom-color |
| Left | right: 110% | border-left-color |
| Right | left: 110% | border-right-color |
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; display:grid; place-items:center; height:200px; background:#0f172a; }
.tip { position:relative; background:#10b981; color:#052e16;
padding:10px 16px; border-radius:8px; cursor:help; font-weight:bold; }
.tip-text {
visibility:hidden; opacity:0;
position:absolute; left:115%; top:50%; transform:translateY(-50%);
background:#052e16; color:#d1fae5; padding:8px 12px; border-radius:6px;
white-space:nowrap; font-size:13px; transition:opacity .2s;
}
.tip-text::after {
content:""; position:absolute; right:100%; top:50%;
transform:translateY(-50%);
border:6px solid transparent; border-right-color:#052e16;
}
.tip:hover .tip-text { visibility:visible; opacity:1; }
</style>
</head>
<body>
<span class="tip">Info
<span class="tip-text">Positioned to the right</span>
</span>
</body>
</html>Use white-space: nowrap so a short tooltip stays on one line, and transition opacity for a gentle fade instead of an abrupt pop.
Pure CSS tooltips are decorative. For accessibility, real tooltips should also work on keyboard focus and expose the text to screen readers (e.g. aria-describedby).
Key points
- Give the trigger position: relative and the tooltip position: absolute.
- Hide the tooltip with visibility/opacity and reveal it on :hover.
- A zero-size pseudo-element with one colored border makes the arrow.
- Swap position values and arrow border to change the side.
- Add keyboard focus and ARIA for accessible tooltips.