Tooltip

Open in Playground

Shows on hover and keyboard focus. placement is top, bottom, left, right or auto (best fit), optionally with -start / -end; it flips when there is no room. On a Button, use tooltip and tooltipPlacement. For SVG shapes wrap them with as="g", and add followPointer to place the tooltip at the mouse (the pie chart does this).

onlyIfTruncated shows the tooltip only when text inside the trigger is cut off, for example a label with an ellipsis.

toprightbottomleftauto

Props

onlyIfTruncatedboolean
Default: false
Show only when text inside the trigger is cut off (ellipsis).
textstring
Tooltip text.
asElementType
Default: 'span'
Wrapper element. Use "g" to put a tooltip on SVG shapes.
followPointerboolean
Default: false
Place the tooltip at the mouse pointer instead of beside the trigger (for large shapes).
childrenReactElement
The element that triggers it on hover and focus.
placement'top' | 'bottom' | 'left' | 'right' | 'auto'
Default: 'bottom'
Preferred side, optionally with -start / -end (e.g. "top-start"). Flips when there is no room; auto picks the best fit.
classNamestring
Default: ''
Extra classes for the root element.

Tooltip props
Prop	Type	Default	Description
`onlyIfTruncated`	boolean	`false`	Show only when text inside the trigger is cut off (ellipsis).
`text`	string	–	Tooltip text.
`as`	ElementType	`'span'`	Wrapper element. Use "g" to put a tooltip on SVG shapes.
`followPointer`	boolean	`false`	Place the tooltip at the mouse pointer instead of beside the trigger (for large shapes).
`children`	ReactElement	–	The element that triggers it on hover and focus.
`placement`	'top' \| 'bottom' \| 'left' \| 'right' \| 'auto'	`'bottom'`	Preferred side, optionally with -start / -end (e.g. "top-start"). Flips when there is no room; auto picks the best fit.
`className`	string	`''`	Extra classes for the root element.