← Components

Tooltip

Provide brief supplemental explanation.

States

defaulthoverfocusdisabled

Tokens

background{semantic.surface.inverse}
foreground{semantic.text.inverse}
radius{radius.sm}
padding{space.2}
focusRing{semantic.focus.ring}

Accessibility

{
  "ruleIds": [
    "STYLE-A11Y-001"
  ],
  "focusVisible": true,
  "keyboard": "Appears for keyboard focus as well as pointer hover."
}

Do / Don't

Do

  • Expose the same content on focus.

Don't

  • Do not put essential instructions only in a tooltip.