diff --git a/gatsby-node.js b/gatsby-node.js index bf4defcd9504..1ca139303732 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -733,6 +733,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { "link", "container", "button-group", + "tooltip", ]; const createComponentPages = (createPage, components) => { diff --git a/src/components/SistentNavigation/content.js b/src/components/SistentNavigation/content.js index 77069a489955..894618748416 100644 --- a/src/components/SistentNavigation/content.js +++ b/src/components/SistentNavigation/content.js @@ -103,4 +103,19 @@ export const content = [ link: "/projects/sistent/components/button-group/code", text: "Button Group", }, + { + id: 27, + link: "/projects/sistent/components/tooltip", + text: "Tooltip", + }, + { + id: 25, + link: "/projects/sistent/components/tooltip/guidance", + text: "Tooltip", + }, + { + id: 26, + link: "/projects/sistent/components/tooltip/code", + text: "Tooltip", + }, ]; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index 2c5e401325b8..f45d68fff438 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -79,6 +79,13 @@ const componentsData = [ "Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.", url: "/projects/sistent/components/box", }, + { + id: 11, + name: "Tooltip", + description: + "The Tooltip component is a small pop-up box that appears when a user hovers over an element.", + url: "/projects/sistent/components/tooltip", + }, ]; const SistentComponents = () => { diff --git a/src/sections/Projects/Sistent/components/tooltip/code.js b/src/sections/Projects/Sistent/components/tooltip/code.js new file mode 100644 index 000000000000..a537bf3e9590 --- /dev/null +++ b/src/sections/Projects/Sistent/components/tooltip/code.js @@ -0,0 +1,463 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { + SistentThemeProvider, + Button, + Box, + Grid, + CustomTooltip, +} from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; +import { CodeBlock } from "../button/code-block"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`, + ` + + + +`, + ` + + + + + + + + +`, + ` + + + +`, + ` + + + +`, +]; + +const TooltipCode = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + + return ( + +
+ +

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. +

+
+ + navigate("/projects/sistent/components/tooltip") + } + title="Overview" + /> + + navigate("/projects/sistent/components/tooltip/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/tooltip/code") + } + title="Code" + /> +
+
+

+ 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. +

+
+
+ + *": { + m: 1, + }, + }} + > + + + + + + + + + + + + +
+ +
+ +

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. +

+
+
+ + + + + + + +
+ +
+
+
+ + ); +}; + +export default TooltipCode; diff --git a/src/sections/Projects/Sistent/components/tooltip/guidance.js b/src/sections/Projects/Sistent/components/tooltip/guidance.js new file mode 100644 index 000000000000..cd3071eda652 --- /dev/null +++ b/src/sections/Projects/Sistent/components/tooltip/guidance.js @@ -0,0 +1,270 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { SistentLayout } from "../../sistent-layout"; +import { + SistentThemeProvider, + Button, + Typography, + CustomTooltip, + Grid, +} from "@layer5/sistent"; +import { Row } from "../../../../../reusecore/Layout"; +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const TooltipGuidance = () => { + const { isDark } = useStyledDarkMode(); + const location = useLocation(); + + return ( + +
+ +

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. +

+
+ navigate("/projects/sistent/components/tooltip")} + title="Overview" + /> + + navigate("/projects/sistent/components/tooltip/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/tooltip/code") + } + title="Code" + /> +
+
+

+ 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. +

+ + +

Positioning

+ +

+ 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. +

+ + +

Styling

+ +

+ 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: +

+ + + Custom Tooltip} + > + + + + + + + + + + + + + + + + + + + + + + + + +

Accessibility

+ +

+ 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. +
    • +
+ + +

Performance Tips

+ +

+ 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. +
    • +
+
+
+ + ); +}; + +export default TooltipGuidance; diff --git a/src/sections/Projects/Sistent/components/tooltip/index.js b/src/sections/Projects/Sistent/components/tooltip/index.js new file mode 100644 index 000000000000..97d9606f46a4 --- /dev/null +++ b/src/sections/Projects/Sistent/components/tooltip/index.js @@ -0,0 +1,238 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { + SistentThemeProvider, + Button, + CustomTooltip, + Box, +} from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentTooltip = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

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. +

+
+ navigate("/projects/sistent/components/tooltip")} + title="Overview" + /> + + navigate("/projects/sistent/components/tooltip/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/tooltip/code") + } + title="Code" + /> +
+
+

+ 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

+ +

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

+ + + + + + + + + + +

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. +

+ + + + + + + + + + + +

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. +

+ + + *": { + m: 1, + }, + }} + > + + + + + + + + + + + + + + + +

Follow Cursor

+ +

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

+ + + + + + + + + + + +

Showing and Hiding

+ +

+ 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. +

+ + + + + + + + + +
+
+ + ); +}; + +export default SistentTooltip;