Merge branch 'master' into feat/imperative-mode

Author: gabrieljablonski

docs/docs/examples/styling.mdx

@@ -212,6 +212,16 @@ import { Tooltip } from 'react-tooltip'
 
 #### Tooltip Arrow with a different color from Tooltip
 
+:::info
+
+This is for demonstration purposes only. Using `arrowColor` instead is recommended.
+
+```jsx
+<Tooltip arrowColor="red" />
+```
+
+:::
+
 ```jsx
 import { Tooltip } from 'react-tooltip'
 
@@ -244,6 +254,38 @@ import { Tooltip } from 'react-tooltip'
   <Tooltip id="my-tooltip-diff" className="example-diff-arrow" classNameArrow="example-arrow" />
 </div>
 
+### Changing the opacity
+
+Setting the opacity through CSS directly on the tooltip element breaks functionality. Use the `opacity` prop, or override the `--rt-opacity` CSS variable instead.
+
+```jsx
+import { Tooltip } from 'react-tooltip'
+
+<div className="example-container">
+  <a data-tooltip-id="my-tooltip-opacity" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </a>
+  <Tooltip id="my-tooltip-opacity" opacity={0.3} />
+</div>
+```
+
+```css
+/* To be used instead of the `opacity` prop, not required otherwise */
+:root {
+  --rt-opacity: 0.3;
+}
+```
+
+<div
+  className="example-container"
+  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
+>
+  <TooltipAnchor data-tooltip-id="my-tooltip-opacity" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip id="my-tooltip-opacity" opacity={0.3} />
+</div>
+
 ### Changing the border radius
 
 #### Removing radius
@@ -364,6 +406,33 @@ import { Tooltip } from 'react-tooltip'
   <Tooltip id="my-tooltip-padding" className="example-padding" />
 </div>
 
+### Changing the border
+
+If you're using the tooltip with the arrow, setting a border through CSS will not work for the arrow.
+
+We recommend using the `border` prop to avoid that.
+
+```jsx
+import { Tooltip } from 'react-tooltip'
+
+<div className="example-container">
+  <a data-tooltip-id="my-tooltip-border" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </a>
+  <Tooltip id="my-tooltip-border" border="1px solid red" />
+</div>
+```
+
+<div
+  className="example-container"
+  style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}
+>
+  <TooltipAnchor data-tooltip-id="my-tooltip-border" data-tooltip-content="Hello world!">
+    ◕‿‿◕
+  </TooltipAnchor>
+  <Tooltip id="my-tooltip-border" border="1px solid red" />
+</div>
+
 ---
 
 :::info

docs/docs/troubleshooting.mdx

@@ -64,6 +64,34 @@ If you've imported the default styling and the tooltip is still not showing up w
 
 If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have empty values) on the anchor element, and also the `content`, `render`, and `children` props on the tooltip are unset (or have empty values), the tooltip is not shown by default.
 
+## The tooltip doesn't close
+
+This usually happens when you try to set the tooltip opacity via CSS. Due to the opacity being used internally to control the tooltip state, overriding it breaks functionality.
+
+Instead, use the `opacity` prop, or override the `--rt-opacity` CSS variable. See [the examples](./examples/styling#changing-the-opacity) for more details.
+
+```jsx
+<Tooltip opacity={1} />
+```
+
+or
+
+```css
+:root {
+  --rt-opacity: 1;
+}
+```
+
+## The border doesn't show for the arrow
+
+Simply setting the border for the tooltip through CSS will not work for the arrow.
+
+Instead, use [the `border` prop](./examples/styling#changing-the-border).
+
+```jsx
+<Tooltip border="1px solid red" />
+```
+
 ## Bad performance
 
 If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.

src/App.tsx

@@ -103,7 +103,9 @@ function App() {
           ref={tooltipRef}
           anchorSelect="section[id='section-anchor-select'] > p > button"
           place="bottom"
-          imperativeModeOnly
+          openEvents={{ click: true }}
+          closeEvents={{ click: true }}
+          globalCloseEvents={{ clickOutsideAnchor: true }}
         >
           Tooltip content
         </Tooltip>

src/components/Tooltip/Tooltip.tsx

@@ -751,7 +751,7 @@ const Tooltip = ({
   }, [id, anchorSelect, imperativeOptions?.anchorSelect])
 
   const actualContent = imperativeOptions?.content ?? content
-  const canShow = Boolean(!hidden && actualContent && show && Object.keys(inlineStyles).length > 0)
+  const canShow = show && Object.keys(inlineStyles).length > 0
 
   useImperativeHandle(forwardRef, () => ({
     open: (options) => {
@@ -782,10 +782,10 @@ const Tooltip = ({
     },
     activeAnchor,
     place: actualPlacement,
-    isOpen: rendered && canShow,
+    isOpen: rendered && !hidden && actualContent && canShow,
   }))
 
-  return rendered ? (
+  return rendered && !hidden && actualContent ? (
     <WrapperElement
       id={id}
       role="tooltip"

src/components/TooltipController/TooltipController.tsx

@@ -13,6 +13,7 @@ import type {
 } from 'components/Tooltip/TooltipTypes'
 import { useTooltip } from 'components/TooltipProvider'
 import { TooltipContent } from 'components/TooltipContent'
+import cssSupports from 'utils/css-supports'
 import type { ITooltipController } from './TooltipControllerTypes'
 
 const TooltipController = React.forwardRef<TooltipImperativeProps, ITooltipController>(
@@ -280,15 +281,15 @@ const TooltipController = React.forwardRef<TooltipImperativeProps, ITooltipContr
         // eslint-disable-next-line no-console
         console.warn('[react-tooltip] Do not set `style.border`. Use `border` prop instead.')
       }
-      if (border && !CSS.supports('border', `${border}`)) {
+      if (border && !cssSupports('border', `${border}`)) {
         // 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}`)) {
+      if (opacity && !cssSupports('opacity', `${opacity}`)) {
         // eslint-disable-next-line no-console
         console.warn(`[react-tooltip] "${opacity}" is not a valid \`opacity\`.`)
       }

src/utils/css-supports.ts

@@ -0,0 +1,6 @@
+const cssSupports = (property: string, value: string): boolean => {
+  const hasCssSupports = 'CSS' in window && 'supports' in window.CSS
+  return hasCssSupports ? window.CSS.supports(property, value) : true
+}
+
+export default cssSupports