CSS Badges and Tooltips

Badges summarize status in a compact shape; tooltips can supplement—but should not replace—visible labels.

A badge uses padding, rounded corners, and text alongside color. Make the status explicit with words such as Active, not green alone.

The native title attribute may show a browser tooltip, but its behavior varies across devices and accessibility tools. For important instructions use persistent helper text or an accessible disclosure instead.

A pill-like radius and contrasting colors indicate a secondary label; a disclosure makes hidden details reachable by keyboard and touch.

Show explicit statuses without color-only meaning.

HTML

<div class="statuses"><span class="badge active">Active</span><span class="badge pending">Pending</span><span class="badge closed">Closed</span></div>

CSS

.statuses { display: flex; flex-wrap: wrap; gap: 8px; } .badge { border-radius: 999px; padding: 6px 11px; font: 700 12px Arial, sans-serif; } .active { color: #065f46; background: #d1fae5; } .pending { color: #92400e; background: #fef3c7; } .closed { color: #475569; background: #e2e8f0; }

Rendered output

Observe: Text and color reinforce each other; each status remains understandable without color.

Use a disclosure for optional explanatory content.

HTML

<details class="hint"><summary>What does Pending mean?</summary><p>We are reviewing your request and will update the status.</p></details>

CSS

.hint { display: inline-block; max-width: 310px; border: 1px solid #cbd5e1; padding: 10px 14px; border-radius: 9px; background: #eff6ff; } .hint summary { cursor: pointer; color: #1d4ed8; font-weight: 600; } .hint[open] { border-color: #60a5fa; } .hint p { margin: 10px 0 0; line-height: 1.5; }

Rendered output

Observe: Click or keyboard-activate the summary to reveal the hint.

A pill-like radius and contrasting colors indicate a secondary label; a disclosure makes hidden details reachable by keyboard and touch.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Color alone is not enough to communicate the status.

• CSS pseudo-element hover tooltips may be inaccessible to touch and keyboard users.

Add a Rejected badge with a readable text label and sufficient contrast.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use badges for summaries and disclosures for optional details.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.