---
url: https://brand.okrado.com/patterns/tooltip/
title: Tooltip
description: A short label for a control, shown on hover and keyboard focus.
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# Tooltip

> A short label for a control, shown on hover and keyboard focus.

A tooltip names an icon-only control or adds a few words to a label. It never holds interactive content and never carries information that is needed to complete a task, because touch users do not see it.

## Behaviour

Read from the component manifest, so this is the component’s own contract. See [Overlays](https://brand.okrado.com/patterns/overlays/) for layers, stacking and dismissal shared by all layers.

### `Tooltip`

| Stage         | beta                                                                                                                                                                                                                                                                                   |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Keyboard      | - Focus on the trigger shows the tip
- Escape dismisses it and focus stays on the trigger                                                                                                                                                                                              |
| Dismissal     | * escape: yes
* outside press: moves away
* close button: none                                                                                                                                                                                                                         |
| Stacking      | Never inside a modal's focus trap as the only carrier of information; sits above every layer (z-tooltip).                                                                                                                                                                              |
| Accessibility | - Opens on focus as well as hover and closes on Escape; touch devices do not show tooltips, so the trigger needs its own accessible name. The tip stays open while the pointer is on it (WCAG 1.4.13). Help that a touch or screen-reader user needs belongs in a Toggletip, not here. |
| Pattern       | [APG: tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)                                                                                                                                                                                                                      |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-tooltip--docs)                                                                                                                                                                                                  |

### `TooltipProvider`

| Stage         | beta                                                                                  |
| ------------- | ------------------------------------------------------------------------------------- |
| Accessibility | - Timing only; it changes nothing for keyboard focus or screen readers.               |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-tooltip--docs) |