Merge pull request #227 from deriv-com/aizad/FEQ-2469/update-tooltip

Aizad/FEQ-2469/Improved Tooltip
deriv-com · Jul 16, 2024 · 91f34a7 · 91f34a7
2 parents d2bf5a9 + 380215c
commit 91f34a7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -57,6 +57,18 @@
     left: -4px;
 }
 
+// Hide Tooltip
+.deriv-tooltip[data-popper-reference-hidden] {
+    visibility: hidden;
+    pointer-events: none;
+
+    > .deriv-tooltip__arrow,
+    .deriv-tooltip__arrow::before {
+        visibility: hidden;
+        pointer-events: none;
+    }
+}
+
 // Tooltip Trigger Class
 .deriv-tooltip__trigger {
     cursor: pointer;

diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
@@ -16,12 +16,13 @@ import "./Tooltip.scss";
 type AsElement = "a" | "div" | "button";
 type TooltipVariantType = "error" | "general";
 export type TooltipProps<T extends AsElement> = ComponentProps<T> & {
-    as: T;
+    as?: T;
     tooltipContainerClassName?: string;
     tooltipContent: ReactNode;
     tooltipOffset?: number;
     tooltipPosition?: Placement;
     variant?: "general" | "error";
+    hideTooltip?: boolean;
 };
 
 const TooltipVariantClass: Record<TooltipVariantType, string> = {
@@ -38,20 +39,22 @@ const TooltipVariantClass: Record<TooltipVariantType, string> = {
  * @param {number} tooltipOffset - The distance between the tooltip and the content.
  * @param {React.ReactNode} [icon] - The icon to display. This can be any React node.
  * @param {string} [href] - The URL the link points to. Required and applicable only when `as` is "a".
- * @param {string} tooltipColor - The background color of the tooltip. Defaults to '#D6DADB'.
  * @param {string} tooltipContent - The content to display inside the tooltip.
+ * @param {string} [tooltipContainerClassName] - Optional class name for the tooltip container.
+ * @param {TooltipVariantType} [variant="general"] - The variant of the tooltip, which can be "general" or "error".
+ * @param {boolean} [hideTooltip=false] - If true, the tooltip will not be displayed.
  *
  * @example
  * // To render a button with a tooltip
- * <YourComponent as="button" tooltipContent="Save" tooltipPosition="bottom">
+ * <Tooltip as="button" tooltipContent="Save" tooltipPosition="bottom">
  *   Save
- * </YourComponent>
+ * </Tooltip>
  *
  * @example
  * // To render a link with a tooltip and an icon
- * <YourComponent as="a" href="https://example.com" tooltipContent="Go to Example" tooltipPosition="right" icon={<YourIcon />}>
+ * <Tooltip as="a" href="https://example.com" tooltipContent="Go to Example" tooltipPosition="right" icon={<YourIcon />}>
  *   Visit Example.com
- * </YourComponent>
+ * </Tooltip>
  *
  * @returns {JSX.Element} The rendered component.
  */
@@ -62,13 +65,14 @@ export const Tooltip = forwardRef<
 >(
     (
         {
-            as,
+            as = "div",
             children,
+            hideTooltip = false,
             tooltipContainerClassName,
             tooltipContent,
-            tooltipPosition = "auto",
-            variant = "general",
             tooltipOffset = 8,
+            tooltipPosition = "top",
+            variant = "general",
             ...rest
         },
         ref,
@@ -90,6 +94,7 @@ export const Tooltip = forwardRef<
                         name: "offset",
                         options: { offset: [0, tooltipOffset] },
                     },
+                    { name: "hide", enabled: hideTooltip },
                 ],
             },
         );

diff --git a/stories/Tooltip.stories.tsx b/stories/Tooltip.stories.tsx
@@ -56,6 +56,10 @@ const meta: Meta = {
                 options: ["general", "error"],
             },
         },
+        hideTooltip: {
+            description: "Hide the tooltip.",
+            control: { type: "boolean" },
+        },
     },
     parameters: { layout: "centered" },
     tags: ["autodocs"],