Tooltip
The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements.
The Tooltip component displays informative text when users hover over, focus on, or tap an element. Tooltips are designed to enhance accessibility and user understanding of interface elements.
Basic Tooltip
Positioned Example
You can specify the position of the Popper using the placement prop. Here's an example of a Tooltip positioned above its anchor:
Distance from anchor
To adjust the distance between the tooltip and its anchor, you can use the slotProps prop to modify the offset of the popper.
Variable width
The variant prop in Tooltip allows you to control the tooltips size with predefined styles (standard or small). This makes it easier to adjust the tooltip to fit various UI requirements quickly and consistently.
Follow Cursor
Tooltips can be configured to follow the cursor, making it easier to read the content.
Showing and Hiding
A delay in showing or hiding the tooltip can be added through the enterDelay and leaveDelay props.
