Tooltip position relative to target element is defined by:
- position – tooltip side – top, bottom, right or left, defaults to top
- placement – tooltip placement relative to position – start, center or end, defaults to center
- gutter – space between tooltip and target element in px, defaults to 5px
All available positions and placements:
Tooltip arrow is controlled by:
- withArrow – set to true if arrow should be rendered
- arrowSize – arrow size in px, defaults to 4px
- position and placement – define arrow position (see previous example)
By default, tooltip is displayed when mouse is over target element.
To change this logic set
By default, tooltip white-space property is set to nowrap. To change that use:
- wrapLines – to enable line breaks
- width – to define tooltip width in px
Note that, multiline tooltips may require different transitions for better UX.
Tooltip is built with Transition component, it supports the following props:
- transition – predefined transition name or transition object
- transitionDuration – transition duration in ms, defaults to 100ms
- transitionTimingFunction – timing function, defaults to
All available predefined transitions:
Tooltip supports all colors defined in theme.colors:
You can delay tooltip open/close events by setting
closeDelay props in ms.
Both props default to 0 and reset if user moves mouse over/out of target element before delay is expired:
By default, pointer events on tooltip are disabled to prevent animations collisions.
To use interactive elements inside tooltip set
In this example tooltip acts more like popover – it is controlled and can be closed with control inside tooltip:
Do not place any important information in tooltip. Component is unmounted from the dom and is not visible to screen readers in default configuration.
aria-describedby props to make tooltip accessible: