feat: opacity prop

ReactTooltip · Jul 3, 2023 · 5eb1cf6 · 5eb1cf6
1 parent 419e582
commit 5eb1cf6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -45,6 +45,7 @@ const Tooltip = ({
   activeAnchor,
   setActiveAnchor,
   border,
+  opacity,
 }: ITooltip) => {
   const tooltipRef = useRef<HTMLElement>(null)
   const tooltipArrowRef = useRef<HTMLElement>(null)
@@ -598,7 +599,11 @@ const Tooltip = ({
           [coreStyles['clickable']]: clickable,
         },
       )}
-      style={{ ...externalStyles, ...inlineStyles }}
+      style={{
+        ...externalStyles,
+        ...inlineStyles,
+        opacity: opacity !== undefined && canShow ? opacity : undefined,
+      }}
       ref={tooltipRef}
     >
       {content}

diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
@@ -90,4 +90,5 @@ export interface ITooltip {
   activeAnchor: HTMLElement | null
   setActiveAnchor: (anchor: HTMLElement | null) => void
   border?: CSSProperties['border']
+  opacity?: CSSProperties['opacity']
 }
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
@@ -45,6 +45,7 @@ const TooltipController = ({
   position,
   isOpen,
   border,
+  opacity,
   setIsOpen,
   afterShow,
   afterHide,
@@ -248,6 +249,14 @@ const TooltipController = ({
       // eslint-disable-next-line no-console
       console.warn(`[react-tooltip] "${border}" is not a valid \`border\`.`)
     }
+    if (style?.opacity) {
+      // eslint-disable-next-line no-console
+      console.warn('[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead.')
+    }
+    if (opacity && !CSS.supports('opacity', `${opacity}`)) {
+      // eslint-disable-next-line no-console
+      console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`)
+    }
   }, [])
 
   /**
@@ -299,6 +308,7 @@ const TooltipController = ({
     position,
     isOpen,
     border,
+    opacity,
     setIsOpen,
     afterShow,
     afterHide,

diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts
@@ -67,6 +67,7 @@ export interface ITooltipController {
    * might break the tooltip arrow positioning.
    */
   border?: CSSProperties['border']
+  opacity?: CSSProperties['opacity']
   setIsOpen?: (value: boolean) => void
   afterShow?: () => void
   afterHide?: () => void