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 positioning of the Tooltip is critical for usability. Use the `placement` prop to control where the Tooltip appears relative to its anchor element. Options include:

• top
• bottom
• left
• right
• top-start
• top-end
• bottom-start
• bottom-end
• left-start
• left-end
• right-start
• right-end

Choosing the right position helps to prevent overlap with other interface elements and improves readability.

The Tooltip component inherits styles from the Sistent theme. You can customize the appearance by applying styles to the content inside the Tooltip. For instance:

HTML Support

The Tooltip component supports HTML content, allowing you to include rich text, links, and other elements inside the tooltip. By passing HTML content as the title prop, you can create more engaging and informative tooltips.

Markdown Support

The Tooltip component supports Markdown content, allowing you to include rich text, links, and other elements inside the tooltip. By passing Markdown content as the title prop, you can create more engaging and informative tooltips.

Triggers

The Tooltip component can be triggered by various user actions, including hover, focus, and click. By default, the Tooltip appears when the user hovers over the anchor element. You can customize the trigger behavior using the following props:

• disableHoverListener: Disables the hover trigger.
• disableFocusListener: Disables the focus trigger.
• disableTouchListener: Disables the touch trigger.

It’s important to ensure that the Tooltip component is accessible to all users. Here are some key considerations:

• By default, tooltips are designed to label their child element rather than describe it. This differs from the title attribute, which can either label or describe the child element based on whether it already has an accessible label.
• Using describeChild : When you want the tooltip to act as an accessible description (adding additional context), you can enable the describeChild prop. Use describeChild only if the tooltip provides supplementary information and the child element already has an accessible label.
• Avoiding Accessibility Violations: Do not use describeChild if the tooltip is the only visible label for the child element, as this would prevent the child from having an accessible name.

When using the Tooltip component, consider the following to optimize performance:

• Use the `placement` prop to control the position of the Tooltip and prevent overlap with other interface elements.
• Ensure that the Tooltip is keyboard navigable, allowing users to open/close it using keyboard shortcuts.