A tooltip from an attribute in CSS

The label lives in the markup, and the pseudo-element renders it.

.tip { position: relative; }

.tip::after {
  content: attr(data-tip);
  position: absolute;
  inset-block-end: calc(100% + 0.4rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.5rem;
  background: #0f172a;
  color: white;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
}

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

How it works

1. content: attr(data-tip) pulls text out of the attribute.
2. The tooltip is positioned against a position: relative parent.
3. A CSS-only tooltip is decoration; a real one needs the accessible name too.

Keywords and builtins used here

• attr
• background
• calc
• color
• content
• ms
• opacity
• padding
• position
• rem
• tip
• transition
• translate

The run, in numbers

Lines

19

Characters to type

379

Tokens

102

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 72 seconds.

Type this snippet

Step 4 of 4 in Surfaces, step 6 of 13 in Styling components.

← Previous Next →