Basic Tooltip
Simple tooltip on hover
Positions
Tooltip with different positions
Browse components
Tooltip
Hover and focus tooltip on any of four sides, with an optional delay.
atoms
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| content | string | No | — | Tooltip text. |
| placement | 'top' | 'bottom' | 'left' | 'right' | No | top | Side the bubble appears on. |
| delay | number | No | 0 | Milliseconds before it opens. |
| disabled | boolean | No | false | Suppress the tooltip. |
| block | boolean | No | false | Lay the trigger out as a block instead of an inline-block. |
| fixed | boolean | No | false | Position against the viewport, to escape a scrolling ancestor. |