chore: update small changes

deriv-com · Jul 3, 2024 · 1b17def · 1b17def
1 parent c3dac46
commit 1b17def
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/src/components/NewTooltip/NewTooltip.scss b/src/components/NewTooltip/NewTooltip.scss
@@ -1,16 +1,20 @@
+// Tooltip Container
 .deriv-tooltip-v2 {
-    z-index: 999;
-    position: absolute;
+    z-index: 9999;
     padding: 8px;
-    cursor: default;
     border-radius: $border-radius;
     width: max-content;
     max-width: 280px;
     animation: fadeIn ease-in-out 0.2s;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px;
     background-color: var(--du-general-active, #d6dadb);
     color: var(--du-text-general, #333);
 }
 
+// Tooltip Arrow
 .deriv-tooltip-v2__arrow,
 .deriv-tooltip-v2__arrow::before {
     position: absolute;
@@ -29,6 +33,7 @@
     transform: rotate(45deg);
 }
 
+// Tooltip Arrow Position
 .deriv-tooltip-v2[data-popper-placement^="top"] > .deriv-tooltip-v2__arrow {
     bottom: -4px;
 }
@@ -44,3 +49,8 @@
 .deriv-tooltip-v2[data-popper-placement^="right"] > .deriv-tooltip-v2__arrow {
     left: -4px;
 }
+
+// Tooltip Trigger Class
+.deriv-tooltip-v2__trigger {
+    cursor: pointer;
+}
diff --git a/src/components/NewTooltip/index.tsx b/src/components/NewTooltip/index.tsx
@@ -1,24 +1,35 @@
-import React, { ElementType, ReactNode, useState } from "react";
+import React, { ComponentProps, ElementType, ReactNode, useState } from "react";
 import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
 import clsx from "clsx";
 import "./NewTooltip.scss";
-import { Placement } from "@popperjs/core";
 
-type NewTooltipProps = {
-    as?: ElementType;
+type AsElement = "a" | "div" | "button";
+type NewTooltipProps<T extends AsElement> = ComponentProps<T> & {
+    as: T;
     children: ReactNode;
-    className?: string;
+    tooltipContainerClassName?: string;
     tooltipContent: ReactNode;
     tooltipPosition: Placement;
 };
 
-export const NewTooltip = ({
+/**
+ * A component that renders an icon | a link | a div with a tooltip.
+ * @param {"a" | "div" | "button"} as - The HTML element or React component to render which can be "a" | "div" | "button".
+ * @param {string} tooltipContent - The content to display inside the tooltip.
+ * @param {"top" | "bottom" | "left" | "right"} tooltipPosition - The position of the tooltip relative to the element.
+ * @param {string} tooltipColor - The background color of the tooltip. Defaults to '#D6DADB'.
+ * @param {ComponentProps<"a" | "div" | "button">} ...rest - component props base on the as property.
+ * @returns {JSX.Element} The rendered component.
+ */
+export const NewTooltip = <T extends AsElement>({
     as,
     children,
-    className,
+    tooltipContainerClassName,
     tooltipContent,
     tooltipPosition,
-}: NewTooltipProps) => {
+    ...rest
+}: NewTooltipProps<T>) => {
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
         null,
@@ -45,14 +56,19 @@ export const NewTooltip = ({
         <>
             <Tag
                 ref={setReferenceElement}
+                className={clsx("deriv-tooltip-v2__trigger", rest.className)}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
+                {...rest}
             >
                 {children}
             </Tag>
             {showTooltip && (
                 <div
-                    className={clsx("deriv-tooltip-v2", className)}
+                    className={clsx(
+                        "deriv-tooltip-v2",
+                        tooltipContainerClassName,
+                    )}
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}