docs: clickable prop

Author: gabrieljablonski

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