CSS — Tooltips

The pattern

Store the tip in an attribute; render it with a pseudo-element:

<button class="tip" data-tip="Copies to clipboard">Copy</button>

.tip {
    position: relative;      /* anchor for the absolute tip */
}

.tip::after {
    content: attr(data-tip);          /* text from the attribute */
    position: absolute;
    bottom: 125%;                     /* above the element */
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;             /* never blocks clicks */
    transition: opacity 0.2s ease-out 0.3s;   /* small delay */
}

.tip:hover::after,
.tip:focus-visible::after {
    opacity: 1;
}

What the browser displays

(Hovering (or keyboard-focusing) the button fades a dark label floating above it.)

Why this design wins:

• attr(data-tip) = one CSS rule styles unlimited tooltips
• pointer-events: none = tooltip can't trap your hover
• focus-visible inclusion = keyboard users get it too
• transition delay = no flicker when brushing past

Positioning variants

Swap one line to move the tip:

/* below */   .tip-b::after { top: 125%; bottom: auto; }
/* right */   .tip-r::after { left: calc(100% + 8px); top: 50%;
                              bottom: auto; translate: 0 -50%; }
/* left */    .tip-l::after { right: calc(100% + 8px); left: auto; … }

Pick per placement so edge-of-screen buttons don't clip their tips.

Arrow

A rotated square peeking from behind:

.tip::before {
    content: "";
    position: absolute;
    bottom: 100%;                 /* just under the bubble */
    left: 50%;
    translate: -50% 4px;
    border: 6px solid transparent;
    border-top-color: #111827;    /* only top shows → triangle */
}

(A tiny triangle pointing down at the button.)

Long-text safety

white-space: nowrap breaks on long tips. Wrap instead:

.tip::after {
    white-space: normal;
    width: max-content;
    max-width: 220px;
}

Accessibility notes

1. CSS tooltips aren't announced by screen readers — for critical info use real markup:

   <button aria-describedby="tip-id">Copy<span role="tooltip" id="tip-id">…</span></button>
   

2. Never hide essential actions behind a hover-only tooltip
3. Touch devices have no hover — ensure the action works without the tip, or show on focus/tap

Common mistakes: forgetting position: relative (tip flies to page corner); missing pointer-events: none; no delay (flicker storm); putting vital instructions in a hover-only tip.

Mini Practice

1. Base tooltip on three buttons with different data-tips.
2. Make -b/-r/-l placement classes; test near screen edges.
3. Add the triangle arrow.
4. Delay entrance 300ms but exit immediately (asymmetric transition).
5. Convert one tooltip to aria-describedby markup for accessibility.

Next: web fonts →