+ The CustomTooltip 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 CustomTooltip 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 CustomTooltip
+ positioned above its anchor:
+
+ The variant prop in CustomTooltip 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 CustomTooltip is critical for usability. Use + the `placement` prop to control where the CustomTooltip appears + relative to its anchor element. Options include: +
++ Choosing the right position helps to prevent overlap with other + interface elements and improves readability. +
+ + ++ The CustomTooltip component inherits styles from the Sistent theme. + You can customize the appearance by applying styles to the content + inside the CustomTooltip. For instance: +
++ It’s important to ensure that the customTooltip 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 CustomTooltip component, consider the following to + optimize performance: +
++ The CustomTooltip 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 CustomTooltip 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.
+
+ The variant prop in CustomTooltip 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 CustomTooltip 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.
+
- The CustomTooltip 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 CustomTooltip 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 CustomTooltip
- positioned above its anchor:
-
- The variant prop in CustomTooltip 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 CustomTooltip is critical for usability. Use - the `placement` prop to control where the CustomTooltip appears - relative to its anchor element. Options include: -
-- Choosing the right position helps to prevent overlap with other - interface elements and improves readability. -
- - -- The CustomTooltip component inherits styles from the Sistent theme. - You can customize the appearance by applying styles to the content - inside the CustomTooltip. For instance: -
-- It’s important to ensure that the customTooltip 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 CustomTooltip 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. +
+ +
+ 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 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 CustomTooltip component displays informative text when users hover - over, focus on, or tap an element. Tooltips are designed to enhance + 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 CustomTooltip 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.
+ 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 CustomTooltip 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. + 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.
- The CustomTooltip 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
+ 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.
+ 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,
From 44e6effb37991b565f05f424db42d5edceb193fa Mon Sep 17 00:00:00 2001
From: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
Date: Tue, 12 Nov 2024 10:59:24 +0000
Subject: [PATCH 4/4] rename title of tooltip
Signed-off-by: Vidit Kushwaha <120644015+Vidit-Kushwaha@users.noreply.github.com>
---
src/sections/Projects/Sistent/components/tooltip/guidance.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/sections/Projects/Sistent/components/tooltip/guidance.js b/src/sections/Projects/Sistent/components/tooltip/guidance.js
index c6771a52c969..cd3071eda652 100644
--- a/src/sections/Projects/Sistent/components/tooltip/guidance.js
+++ b/src/sections/Projects/Sistent/components/tooltip/guidance.js
@@ -129,7 +129,7 @@ const TooltipGuidance = () => {
title={