+ 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. +
+ +
+ You can specify the position of the Popper using the{" "}
+ placement prop. Here's an example of a Tooltip
+ positioned above its anchor:
+
+ 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. +
+
+ A delay in showing or hiding the tooltip can be added through the{" "}
+ enterDelay and leaveDelay props.
+
+ 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. +
+ + ++ 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: +
++ 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: +
++ 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. +
++ 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. +
++ 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: +
+title{" "}
+ attribute, which can either label or describe the child element
+ based on whether it already has an accessible label.
+ 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.
+ + When using the Tooltip component, consider the following to optimize + performance: +
++ 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. +
+ ++ A simple tooltip that displays helpful information when hovering + over an icon button. +
++ Tooltips support different placements, allowing flexibility + depending on your layout requirements. +
+
+ 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.
+