Tooltip — Cayuse Design System

Examples

Tooltip — hover or Tab to the icon, then press Escape

Indirect cost rate

html

<span class="cds-tooltip">
  <button type="button" class="cds-tooltip__trigger"
          aria-describedby="rate-tip" aria-label="Additional information">
    <span class="fa fa-info-circle" aria-hidden="true"></span>
  </button>
  <span class="cds-tooltip__bubble" role="tooltip" id="rate-tip">
    The federally negotiated rate applied to modified total direct costs.
  </span>
</span>

Figma properties

Property	Values	Notes
`tooltip-text`	text	The content. Text only.
`Stroke`	boolean	A border on the bubble, for use over busy backgrounds.

Sizing, from the annotations: maximum width 250px. Height is unconstrained, but the guidance is that tips should be concise.

The three rules from the file

The Tooltip page carries more accessibility annotation than any other component, and it cites the standard directly — WCAG 2.1 SC 1.4.13, Content on Hover or Focus. The requirements it records:

Dismissable. Escape closes the tooltip without moving the pointer or focus.
Hoverable. The pointer can move onto the tooltip itself without it disappearing.
Persistent. It stays until the user moves away, dismisses it, or the information is no longer valid.

The file also specifies the announcement: focusing the icon reads its name — “Additional information” — then the tooltip appears and its content is read. Escape or moving focus away dismisses it. The screen-reader experience described is “Menu item, Study Design, eye icon, is tooltip”: the user is told the tooltip exists before deciding whether to open it.

The Person Quick View problem

The file documents a related pattern and then criticises it, in a note worth preserving: a hover card showing a person’s details — title, department, email, ORCID — triggered by hovering a name rendered in #0076b6 without an underline, so as not to signal a link.

The critique on the artboard: “Person Quick View (ca. 2021) utilises a minesweeper approach — who would ever guess what is going to happen on mouseover? Where is this in use?”

That critique is correct, and it generalises

Brand-blue text with no underline reads as a link that someone forgot to style. The user has no way to know that hovering reveals content, and a keyboard user has no way to reach it at all. Worse, the pattern deliberately removes the underline to avoid looking like a link — which means the affordance is intentionally hidden.

If a name has more information behind it, give it a visible affordance: make it a real link to the person’s record, or put an explicit info icon beside it that follows the tooltip rules above. Hover-only discovery on an element that advertises nothing fails SC 1.4.13 and SC 2.1.1 together.

Usage

When to use it

Use for a short clarification of something already on screen.
Attach it to a visible icon that signals information is available.
Keep it under 250px wide and to a sentence or two.
Make it dismissable with Escape and hoverable.

When not to use it

Do not put links, buttons or form fields inside one.
Do not hide essential information in a tooltip — anything required to complete the task belongs on the page.
Do not attach one to plain text with no affordance.
Do not use one on touch-primary interfaces as the only route to the information; there is no hover.

Accessibility

The trigger is a real <button> so it is focusable, with an aria-label naming it.
The bubble is role="tooltip", bound with aria-describedby so its content is read as the trigger’s description.
Escape dismisses it. The demo above implements this — Tab to an icon and press Escape.
It appears on focus as well as hover; hover alone excludes keyboard users entirely.
The bubble is white on --color-gray-500 — 6.48:1, comfortably above threshold at 12px.

Tokens consumed

Token	Applied to	Resolves to
`--tooltip-background`	Bubble fill	`--color-gray-500` → `#5e5e5e`
`--tooltip-text`	Bubble text	`--color-white`
`--icon-primary`	Trigger glyph	`--primary-brand-color`
`--radius-3`	Bubble radius	3px