Tooltip

A .term component that surfaces a short definition above an unfamiliar term. Works with pure CSS hover / focus-within — no JavaScript required. The bubble (.tip) nests inside .term and is lifted out of the normal document flow with position: absolute.

Default

.term — dashed underline (1px dashed var(--c-sky)) + primary text color, cursor: help. The .tip bubble uses an ink-deep background with white text and a --sh-full shadow. Shown on hover or focus-within. Hover over the term in the sentence below.

Social Solidarity Bank is a specialist institution in social financeFinancial services for vulnerable populations.

Rules

Use tooltips only on the first occurrence of a difficult term in body text. Never put critical information exclusively inside a tooltip.

  • When to use — apply only to technical terms, acronyms, or proper nouns the reader may not know.
  • Text length — keep the bubble copy to 1–2 lines. For longer explanations, write them inline in the body or use a Sheet / Modal.
  • Mobile — touch environments have no hover; the tooltip will not appear. Always surface critical information in the body text as well.
  • No nesting — do not place a .term inside another .term.
  • Accessibility — add tabIndex=0 so keyboard users can reach the term. The bubble is shown on focus-within as well.