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-TooltipArrow