Tooltip
Introduction
The Tooltip
component is used to describe icon buttons.
In some cases tooltips are used to show more content, this should
be used cautiously since it is hard to be completely accessible.
Tooltip with IconButton
Each IconButton
should always be wrapped in a Tooltip
.
Hide code
Tooltip to show some content
Use with caution, it’s hard to be completely accessible.
Hide code
Tooltip with card appearance
Use with caution, it’s hard to be completely accessible.
Hide code
Positioning the Tooltip
The Tooltip
can be positioned on the following positions using the position
prop:
Position.TOP
Position.TOP_LEFT
Position.TOP_RIGHT
Position.BOTTOM
Position.BOTTOM_LEFT
Position.BOTTOM_RIGHT
Position.LEFT
Position.RIGHT
For a Tooltip
the only really useful sides are TOP
, RIGHT
, BOTTOM
and LEFT
as shown below.
Hide code
Tooltip
Props
appearance'default' | 'card'
The appearance of the tooltip.
positionPosition.TOP | Position.TOP_LEFT | Position.TOP_RIGHT | Position.BOTTOM | Position.BOTTOM_LEFT | Position.BOTTOM_RIGHT | Position.LEFT | Position.RIGHT
The position the Popover is on.
contentnode
The content of the Popover.
hideDelaynumber
Time in ms before hiding the Tooltip.
showDelaynumber
Time in ms before showing the Tooltip.
isShownbool
When True, manually show the Tooltip.
childrennode
The target button of the Tooltip.
statelessPropsobject
Properties passed through to the Tooltip.