A popup with contextual information on hover or focus.
import { TooltipTrigger, Tooltip, Button } from '@backstage/ui';
<TooltipTrigger>
<Button>Hover me</Button>
<Tooltip>Helpful information</Tooltip>
</TooltipTrigger>Wraps the trigger element and tooltip content.
| Prop | Type | Default | Description |
|---|---|---|---|
| delay | number | 600 | Milliseconds before tooltip appears on hover. |
| closeDelay | number | - | Milliseconds before tooltip hides after leaving trigger. |
| trigger | focus | - | Set to focus for focus-only tooltips that do not appear on hover. |
| isOpen | boolean | - | Controlled open state. Use with onOpenChange. |
| defaultOpen | boolean | - | Initial open state for uncontrolled usage. |
| isDisabled | boolean | - | Prevents the tooltip from appearing. |
| children | ReactNode | - |
Inherits all React Aria TooltipTrigger props.
The tooltip content that appears on hover or focus.
| Prop | Type | Default | Description |
|---|---|---|---|
| placement | toptop starttop endbottombottom startbottom endleftleft topleft bottomrightright topright bottom | top | Position relative to the trigger element. Compound placements include alignment. |
| offset | number | 4 | Distance in pixels from the trigger element. |
| containerPadding | number | 12 | Padding from viewport edge when repositioning. |
| children | ReactNode | - | |
| className | string | - | Additional CSS class name for custom styling. |
| style | CSSProperties | - | Inline CSS styles object. |
Inherits all React Aria Tooltip props.
The tooltip appears in the specified direction relative to the trigger.
Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-Tooltipbui-TooltipContentbui-TooltipArrowTooltip Breaking Simplified the neutral background prop API for container components. The explicit neutral-1, neutral-2, neutral-3, and neutral-auto values have been removed from ProviderBg. They are replaced by a single 'neutral' value that always auto-increments from the parent context, making it impossible to skip or pin to an explicit neutral level. #33002
Migration Guide:
Replace any explicit bg="neutral-1", bg="neutral-2", bg="neutral-3", or bg="neutral-auto" props with bg="neutral". To achieve a specific neutral level in stories or tests, use nested containers — each additional bg="neutral" wrapper increments by one level.
// Before
<Box bg="neutral-2">...</Box>
// After
<Box bg="neutral">
<Box bg="neutral">...</Box>
</Box>
Tooltip Breaking Removed --bui-bg-popover CSS token. Popover, Tooltip, Menu, and Dialog now use --bui-bg-app for their outer shell and Box bg="neutral-1" for content areas, providing better theme consistency and eliminating a redundant token. #32979
Migration Guide:
Replace any usage of --bui-bg-popover with --bui-bg-neutral-1 (for content surfaces) or --bui-bg-app (for outer shells):
- background: var(--bui-bg-popover);
+ background: var(--bui-bg-neutral-1);
useStyles to useDefinition hook. Exported OwnProps types for each component, enabling better type composition for consumers. #33050