Tooltip

Atom

Contextual hint that appears near a UI element on hover or focus. Mirrors Figma node 140-7707 (light) + 2289-4036 (dark) 1:1. The tooltip inverts between modes — dark pill + light text in light mode, light pill + dark text in dark mode — always contrasting with the page surface. Three sizes (Large 40 px / Medium 32 px / Small 24 px) × four arrow positions. For live usage wrap the trigger + tooltip in .tooltip-host; the tooltip hides at rest and fades in on hover/focus-within via pure CSS.

When to use

✅ Do

Use for supplementary hints on icon-only buttons where no visible label is present
Use for truncated text that needs full-text disclosure on hover
Keep tooltip text to a single short phrase — 1–8 words
Use .tooltip-host for hover/focus-triggered show without JavaScript

❌ Don't

Put critical information in a tooltip — it is invisible by default
Use on mobile — hover doesn't exist on touch devices
Repeat visible label text — tooltips add context, not duplicates
Use for long descriptions — use a popover or inline text instead

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

A Tooltip is a pill that inverts between light and dark mode. The arrow caret is rendered via CSS pseudo-elements.

1Pill — .tooltip. Inverts between modes: dark in light, light in dark.
2Arrow caret — ::before (border) + ::after (fill). Direction set by position modifier.
3Position — .tooltip-top/bottom/left/right. Controls which side the arrow appears on.
4Icon slot — .tooltip-icon. Optional leading icon, scales with size modifier.
5Host wrapper — .tooltip-host. CSS-only show/hide on hover and focus-within. No JS needed.

Default

A bare .tooltip at the Large (default) size. No arrow is shown standalone — add a positional class (.tooltip-top etc.) to get the caret.

Interactive

Hover any button below to see the live tooltip. Uses .tooltip-host (position relative wrapper) + absolute child .tooltip.tooltip-{position}. No JavaScript — the caret and fade are pure CSS. Each position offsets the tooltip by calc(100% + 8px) from the trigger edge.

Top

Bottom

Right

Left

Sizes

Three sizes mapped 1:1 to Figma's symbol names. Default .tooltip is Large (40 px, Body 2 14/24 Medium). .tooltip-md is Medium (32 px, Caption 1 12/16). .tooltip-sm is Small (24 px, Caption 2 10/12). Horizontal padding is --spacing-sm (12 px) for lg/md and --spacing-xs (8 px) for sm.

Large · 40

Medium · 32

Small · 24

Positions

Four positions — the class name indicates where the tooltip appears; the arrow points back toward the trigger. Shown at Large / Medium / Small per row. In production, combine position + size on the same element: class="tooltip tooltip-md tooltip-top".

Top — tooltip above trigger (arrow at bottom)

Bottom — tooltip below trigger (arrow at top)

Right — tooltip to the right (arrow at left)

Left — tooltip to the left (arrow at right)

Full matrix

4 positions × 3 sizes. Toggle the theme switch to confirm the dark-mode inversion: pill flips to #F6F6F6 bg + #2D2D2D text on the dark surface.

Accessibility

Attribute / Behaviour	Value	Notes
Tooltip role	`role="tooltip"`	Set on the tooltip element so screen readers identify it
Trigger association	`aria-describedby="tooltip-id"`	Link the trigger element to the tooltip via its ID
Keyboard — show	On focus of the trigger	Tooltip must appear when the trigger receives keyboard focus, not only on hover
Keyboard — hide	`Esc`	Always allow dismissing the tooltip with Escape
Touch	Not supported	Tooltip is hover/focus only. For mobile, include the info inline or in a tap-accessible popover

API

Class / attr	On	Description
.tooltip	<span>	Base pill. Large (40 px, Body 2 14/24 Medium). Dark bg + light text in light mode; inverts in dark mode. `position: relative` for the arrow pseudo-elements.
.tooltip-md	.tooltip	Medium — 32 px tall, Caption 1 (12/16) Medium.
.tooltip-sm	.tooltip	Small — 24 px tall, Caption 2 (10/12) Medium. Padding reduces to `6px 8px`.
.tooltip-top	.tooltip	Arrow at the pill's bottom pointing down → tooltip appears above the trigger.
.tooltip-bottom	.tooltip	Arrow at the pill's top pointing up → tooltip appears below.
.tooltip-right	.tooltip	Arrow at the pill's left pointing left → tooltip appears to the right.
.tooltip-left	.tooltip	Arrow at the pill's right pointing right → tooltip appears to the left.
.tooltip-icon	<span> inside .tooltip	Leading / trailing icon slot. SVG scales 16 / 14 / 12 px with the parent size.
.tooltip-host	<span> / <div> wrapping trigger + tooltip	Interactive wrapper. `position: relative`. The child tooltip is absolutely positioned and hidden at rest (`opacity: 0`); it fades in on `:hover` or `:focus-within` without JavaScript. Combine with a positional class on the tooltip for offset placement.
--tooltip-bg	Token	`#2D2D2D` light / `#F6F6F6` dark — inverts to contrast with the page.
--tooltip-text	Token	`#F6F6F6` light / `#2D2D2D` dark.
--tooltip-border	Token	`rgba(255,255,255,0.10)` light / `rgba(0,0,0,0.10)` dark — subtle 10% hairline.