opacity prop

docs/docs/options.mdx

@@ -122,6 +122,7 @@ import { Tooltip } from 'react-tooltip';
 | `afterHide`        | `function`                 | no       |                           |                                                                                                                                   | A function to be called after the tooltip is hidden                                                                                                             |
 | `middlewares`      | `Middleware[]`             | no       |                           | array of valid `floating-ui` middlewares                                                                                          | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information                                 |
 | `border`           | `CSSProperties['border']`  | no       |                           | a CSS border style                                                                                                                | Change the style of the tooltip border (including the arrow)                                                                                                    |
+| `opacity`          | `CSSProperties['opacity']` | no       | `0.9`                     | a CSS opacity value                                                                                                               | Change the opacity of the tooltip                                                                                                                               |
 
 ### Envs
 

docs/docs/upgrade-guide/changelog-v4-v5.md

@@ -63,11 +63,11 @@ If you run into any problems with the tooltip not updating after changes are mad
 - [x] `offset` - also available on anchor element as `data-tooltip-offset`
 - [ ] `padding` - use `className` and custom CSS
 - [ ] `multiline` - supported by default in `content` and `html` props
-- [ ] `border` - use `className` and custom CSS
-- [ ] `borderClass` - use `className` and custom CSS
+- [x] `border`
+- [ ] `borderClass` - use `border` prop
 - [ ] `textColor` - use `className` and custom CSS
 - [ ] `backgroundColor` - use `className` and custom CSS
-- [ ] `borderColor` - use `className` and custom CSS
+- [ ] `borderColor` - use `border` prop
 - [ ] `arrowColor` - use `className` and custom CSS
 - [ ] `arrowRadius` - use `className` and custom CSS
 - [ ] `tooltipRadius` - use `className` and custom CSS

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}

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']
 }

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,

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