Tooltip
Tooltips are contextual, non-actionable, and informative floating labels. They can be activated by hover, focus, or even click to display additional information to help users understand something. They should always be non-essential to the global understanding.
Hover me!
<Tooltip tooltipTitle="Tooltip title." content="Write the tooltip content here.">
Hover me!
</Tooltip>
The tooltip can be displayed by adding a visible
property.
Default tooltip
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
>
Default tooltip
</Tooltip>
Tooltip Sizes
Tooltips are available in three sizes: small
, medium
, large
. By default, the medium tooltip is used. You can change the tooltip size with the size
property.
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
size="small"
>
Small tooltip
</Tooltip>
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
size="medium"
>
Medium tooltip
</Tooltip>
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
size="large"
>
Large tooltip
</Tooltip>
Tooltip Orientations
The tooltip component can be positioned according to its target by setting the orientation
property with the bottom
, top
, left
, right
values.
Top tooltip
Left tooltip
Right tooltip
Bottom tooltip
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
orientation="top"
>Top tooltip</Tooltip
>
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
orientation="left"
>Left tooltip</Tooltip
>
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
orientation="right"
>Right tooltip</Tooltip
>
<Tooltip
visible
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
orientation="bottom"
>Bottom tooltip</Tooltip
>
Tip Positions
The tooltip component should always be positioned according to its target. The tip position variants help you complete the tooltip orientation variant to be even more precise.
For all orientations, use the tipPosition property with the start
, center
, end
values.
<Tooltip content="Top end tooltip" visible tipPosition="end"></Tooltip>
<Tooltip content="Top center tooltip" visible></Tooltip>
<Tooltip
content="Top start tooltip"
visible
tipPosition="start"
></Tooltip>
<Tooltip
content="Left end tooltip"
visible
tipPosition="end"
orientation="left"
></Tooltip>
...
Low Contrast Option
To lower the visual emphasis on the tooltip component, you can activate the Low contrast option by adding the lowContrast
property. This option will apply a lighter background to the tooltip while remaining always accessible.
Hover me!
<Tooltip
visible
lowContrast
tooltipTitle="Tooltip title."
content="Write the tooltip content here."
>
Hover me!
</Tooltip>
API
Deprecated Property
Note: The title
property is deprecated. Use the tooltipTitle
property instead.