Tooltip

import {Tooltip} from '@primer/react-brand'

Examples

Default

Custom direction

By default, tooltips appear below the element. You can change the direction by passing the direction prop with a cardinal or diagonal direction. Supported values are n, ne, e, se, s, sw, w, and nw.

As long as there is enough room in the viewport, the tooltip will appear in the specified direction. If there is not enough room, the tooltip will appear in whatever direction it can place the tooltip without overflowing the viewport.

Delay

Tooltips use a short pointer delay by default to avoid appearing while the pointer passes over a trigger. Use medium or long for groups of familiar controls where immediate tooltips would be distracting. Keyboard focus always opens the tooltip immediately.

With an icon button

Use IconButton when a familiar Octicon can replace a visible text label. Its required aria-label provides the accessible name and automatically appears in a tooltip on hover and keyboard focus, so it does not need to be wrapped in Tooltip.

Use this with caution. It is generally better to use a visible label for better usability and accessibility.

For other custom icon-only controls, use type="label" to make the tooltip text the trigger’s accessible name.

Component props

Related components

• Popover: For displaying more complex interactive content that appears when triggered
• Button: Often used in conjunction with tooltips
• Icon button: For familiar icon-only actions with automatic tooltips