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.

A simple tooltip that displays helpful information when hovering over an icon button.

Custom Position

Tooltips support different placements, allowing flexibility depending on your layout requirements.

Disabled Elements

By default disabled elements like button do not trigger user interactions so a Tooltip will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element, such as a span.

To adjust the distance between the tooltip and its anchor, you can use the slotProps prop to modify the offset of the popper.

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.

Tooltips can be configured to follow the cursor, making it easier to read the content.

The Tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the enterDelay and leaveDelay props.