A tooltip displays a description of an element on hover or focus.
import { TooltipTrigger, Tooltip, Button } from '@backstage/ui';
<TooltipTrigger>
<Button>Button</Button>
<Tooltip>I am a tooltip</Tooltip>
</TooltipTrigger>The trigger will wrap both the trigger and the tooltip.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| isDisabled | boolean | - | No |
| delay | number | 600 | No |
| closeDelay | number | 500 | No |
| isOpen | boolean | - | No |
| defaultOpen | boolean | - | No |
| children | ReactNode | - | No |
The tooltip will wrap the content of the tooltip.
| Prop | Type | Default | Responsive |
|---|---|---|---|
| triggerRef | RefObject<Element | null> | - | No |
| isEntering | boolean | - | No |
| isExiting | boolean | - | No |
| placement | toprightbottomleft | - | No |
| containerPadding | number | 12 | No |
| offset | number | 0 | No |
| children | ReactNode | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |
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-TooltipArrow0.6.0 - New Tooltip component. #30461