Add the clickable prop, similar to v4

docs/docs/getting-started.mdx

@@ -96,6 +96,32 @@ import { Tooltip } from 'react-tooltip'
 <Tooltip anchorId="my-anchor-element" />
 ```
 
+### Clickable tooltip
+
+By default, you can't interact with elements inside the tooltip. To allow for proper usage of elements such as buttons and inputs, use the `clickable` prop.
+
+```jsx
+<TooltipAnchor id="not-clickable">◕‿‿◕</TooltipAnchor>
+<Tooltip anchorId="not-clickable">
+  <button>You can't click me :(</button>
+</Tooltip>
+<TooltipAnchor id="clickable">◕‿‿◕</TooltipAnchor>
+<Tooltip anchorId="clickable" clickable>
+  <button>You can click me!</button>
+</Tooltip>
+```
+
+<div style={{ display: 'flex', columnGap: '8px', justifyContent: 'center', paddingTop: '36px' }}>
+  <TooltipAnchor id="not-clickable">◕‿‿◕</TooltipAnchor>
+  <Tooltip anchorId="not-clickable">
+    <button>You can't click me :(</button>
+  </Tooltip>
+  <TooltipAnchor id="clickable">◕‿‿◕</TooltipAnchor>
+  <Tooltip anchorId="clickable" clickable>
+    <button>You can click me!</button>
+  </Tooltip>
+</div>
+
 ### Styling
 
 If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css'`.

docs/docs/options.mdx

@@ -68,6 +68,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 | delayHide        | number                     | false    |                           | any `number`                                      | tooltip hide will be delayed in miliseconds by the amount of value                                                                                              |
 | float            | boolean                    | false    | `false`                   | `true` `false`                                    | tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                                                  |
 | noArrow          | boolean                    | false    | `false`                   | `true` `false`                                    | tooltip arrow will not be shown                                                                                                                                 |
+| clickable        | boolean                    | false    | `false`                   | `true` `false`                                    | allow interaction with elements inside the tooltip. useful when using buttons and inputs                                                                        |
 | style            | CSSProperties              | false    |                           | any React inline style                            | add styles directly to the component by `style` attribute                                                                                                       |
 | position         | `{ x: number; y: number }` | false    |                           | any `number` value for both `x` and `y`           | override the tooltip position on the viewport                                                                                                                   |
 | isOpen           | boolen                     | false    | handled by internal state | `true` `false`                                    | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |

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

@@ -76,7 +76,7 @@ V4 was a great react tooltip component but was built a few years ago, he was bui
 - [ ] `resizeHide` - if requested, can be implemented later
 - [x] `wrapper` - also available on anchor element as `data-tooltip-wrapper`
 - [ ] `bodyMode`
-- [ ] `clickable` - use controlled state to keep tooltip open
+- [x] `clickable`
 - [ ] `disableInternalStyle` - CSS will be a separate file and can be imported or not
 
 ### Detailed informations

src/App.tsx

@@ -17,7 +17,9 @@ function WithProviderMinimal() {
           <button>Minimal 2</button>
         </TooltipWrapper>
       </p>
-      <Tooltip />
+      <Tooltip clickable>
+        <button>button</button>
+      </Tooltip>
     </section>
   )
 }
@@ -159,6 +161,7 @@ function App() {
             content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
             events={['click']}
             position={position}
+            positionStrategy="fixed"
           />
         </div>
       </div>

src/components/Tooltip/Tooltip.tsx

@@ -23,7 +23,8 @@ const Tooltip = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
-  noArrow,
+  noArrow = false,
+  clickable = false,
   style: externalStyles,
   position,
   // props handled by controller
@@ -43,6 +44,7 @@ const Tooltip = ({
   const lastFloatPosition = useRef<IPosition | null>(null)
   const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id)
   const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
+  const hoveringTooltip = useRef(false)
 
   const handleShow = (value: boolean) => {
     if (setIsOpen) {
@@ -62,14 +64,17 @@ const Tooltip = ({
     }, delayShow)
   }
 
-  const handleHideTooltipDelayed = () => {
+  const handleHideTooltipDelayed = (delay = delayHide) => {
     if (tooltipHideDelayTimerRef.current) {
       clearTimeout(tooltipHideDelayTimerRef.current)
     }
 
     tooltipHideDelayTimerRef.current = setTimeout(() => {
+      if (hoveringTooltip.current) {
+        return
+      }
       handleShow(false)
-    }, delayHide)
+    }, delay)
   }
 
   const handleShowTooltip = (event?: Event) => {
@@ -93,7 +98,10 @@ const Tooltip = ({
   }
 
   const handleHideTooltip = () => {
-    if (delayHide) {
+    if (clickable) {
+      // allow time for the mouse to reach the tooltip, in case there's a gap
+      handleHideTooltipDelayed(delayHide || 50)
+    } else if (delayHide) {
       handleHideTooltipDelayed()
     } else {
       handleShow(false)
@@ -207,6 +215,19 @@ const Tooltip = ({
       }
     }
 
+    const handleMouseEnterTooltip = () => {
+      hoveringTooltip.current = true
+    }
+    const handleMouseLeaveTooltip = () => {
+      hoveringTooltip.current = false
+      handleHideTooltip()
+    }
+
+    if (clickable) {
+      tooltipRef.current?.addEventListener('mouseenter', handleMouseEnterTooltip)
+      tooltipRef.current?.addEventListener('mouseleave', handleMouseLeaveTooltip)
+    }
+
     enabledEvents.forEach(({ event, listener }) => {
       elementRefs.forEach((ref) => {
         ref.current?.addEventListener(event, listener)
@@ -215,6 +236,10 @@ const Tooltip = ({
 
     return () => {
       window.removeEventListener('click', handleClickOutsideAnchor)
+      if (clickable) {
+        tooltipRef.current?.removeEventListener('mouseenter', handleMouseEnterTooltip)
+        tooltipRef.current?.removeEventListener('mouseleave', handleMouseLeaveTooltip)
+      }
       enabledEvents.forEach(({ event, listener }) => {
         elementRefs.forEach((ref) => {
           ref.current?.removeEventListener(event, listener)
@@ -297,6 +322,7 @@ const Tooltip = ({
       className={classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
         [styles['show']]: hasContentOrChildren && !calculatingPosition && (isOpen || show),
         [styles['fixed']]: positionStrategy === 'fixed',
+        [styles['clickable']]: clickable,
       })}
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}

src/components/Tooltip/TooltipTypes.d.ts

@@ -49,6 +49,7 @@ export interface ITooltip {
   delayHide?: number
   float?: boolean
   noArrow?: boolean
+  clickable?: boolean
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean

src/components/Tooltip/styles.module.css

@@ -29,6 +29,10 @@
   display: none;
 }
 
+.clickable {
+  pointer-events: auto;
+}
+
 .show {
   visibility: visible;
   opacity: var(--rt-opacity);

src/components/TooltipController/TooltipController.tsx

@@ -29,7 +29,8 @@ const TooltipController = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
-  noArrow,
+  noArrow = false,
+  clickable = false,
   style,
   position,
   isOpen,
@@ -184,6 +185,7 @@ const TooltipController = ({
     delayHide: tooltipDelayHide,
     float: tooltipFloat,
     noArrow,
+    clickable,
     style,
     position,
     isOpen,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -28,6 +28,7 @@ export interface ITooltipController {
   delayHide?: number
   float?: boolean
   noArrow?: boolean
+  clickable?: boolean
   style?: CSSProperties
   position?: IPosition
   isOpen?: boolean