From d1067cd15fb8e8d5187bc3bb13755205337f560d Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Sat, 13 May 2023 14:36:19 -0300
Subject: [PATCH 1/3] feat: hidden prop and data attribute

---
 src/components/Tooltip/Tooltip.tsx                          | 3 ++-
 src/components/Tooltip/TooltipTypes.d.ts                    | 2 ++
 src/components/TooltipController/TooltipController.tsx      | 6 ++++++
 .../TooltipController/TooltipControllerTypes.d.ts           | 2 ++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index dc222f90..ab9d2e1b 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -25,6 +25,7 @@ const Tooltip = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
+  hidden = false,
   noArrow = false,
   clickable = false,
   closeOnEsc = false,
@@ -538,7 +539,7 @@ const Tooltip = ({
     }
   }, [id, anchorSelect])
 
-  const canShow = content && show && Object.keys(inlineStyles).length > 0
+  const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0
 
   return rendered ? (
     <WrapperElement
diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts
index 9026c580..7fd3431c 100644
--- a/src/components/Tooltip/TooltipTypes.d.ts
+++ b/src/components/Tooltip/TooltipTypes.d.ts
@@ -24,6 +24,7 @@ export type DataAttribute =
   | 'delay-show'
   | 'delay-hide'
   | 'float'
+  | 'hidden'
 
 /**
  * @description floating-ui middleware
@@ -62,6 +63,7 @@ export interface ITooltip {
   delayShow?: number
   delayHide?: number
   float?: boolean
+  hidden?: boolean
   noArrow?: boolean
   clickable?: boolean
   closeOnEsc?: boolean
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index 41a850fb..a535cd59 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -35,6 +35,7 @@ const TooltipController = ({
   delayShow = 0,
   delayHide = 0,
   float = false,
+  hidden = false,
   noArrow = false,
   clickable = false,
   closeOnEsc = false,
@@ -53,6 +54,7 @@ const TooltipController = ({
   const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow)
   const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)
   const [tooltipFloat, setTooltipFloat] = useState(float)
+  const [tooltipHidden, setTooltipHidden] = useState(hidden)
   const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
@@ -112,6 +114,9 @@ const TooltipController = ({
       float: (value) => {
         setTooltipFloat(value === null ? float : value === 'true')
       },
+      hidden: (value) => {
+        setTooltipHidden(value === null ? hidden : value === 'true')
+      },
     }
     // reset unset data attributes to default values
     // without this, data attributes from the last active anchor will still be used
@@ -239,6 +244,7 @@ const TooltipController = ({
     delayShow: tooltipDelayShow,
     delayHide: tooltipDelayHide,
     float: tooltipFloat,
+    hidden: tooltipHidden,
     noArrow,
     clickable,
     closeOnEsc,
diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts
index 4612bb78..31842e4a 100644
--- a/src/components/TooltipController/TooltipControllerTypes.d.ts
+++ b/src/components/TooltipController/TooltipControllerTypes.d.ts
@@ -42,6 +42,7 @@ export interface ITooltipController {
   delayShow?: number
   delayHide?: number
   float?: boolean
+  hidden?: boolean
   noArrow?: boolean
   clickable?: boolean
   closeOnEsc?: boolean
@@ -70,5 +71,6 @@ declare module 'react' {
     'data-tooltip-delay-show'?: number
     'data-tooltip-delay-hide'?: number
     'data-tooltip-float'?: boolean
+    'data-tooltip-hidden'?: boolean
   }
 }

From dc099a971bdb5f2822813d3fe3d2a87f2d87e4b0 Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Sat, 13 May 2023 14:42:00 -0300
Subject: [PATCH 2/3] docs: hidden prop and data attribute

---
 docs/docs/options.mdx                      | 6 ++++--
 docs/docs/upgrade-guide/changelog-v4-v5.md | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
index 959e18d5..09ebbc8f 100644
--- a/docs/docs/options.mdx
+++ b/docs/docs/options.mdx
@@ -73,6 +73,7 @@ import 'react-tooltip/dist/react-tooltip.css';
 | data-tooltip-delay-show        | number     | false     |             | any `number`                                      | The delay (in ms) before showing the tooltip                                                                                              |
 | data-tooltip-delay-hide        | number     | false     |             | any `number`                                      | The delay (in ms) before hiding the tooltip                                                                                               |
 | data-tooltip-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"`)                            |
+| data-tooltip-hidden            | boolean    | false     | `false`     | `true` `false`                                    | Tooltip will not be shown                                                                                                                 |
 
 ### Props
 
@@ -98,7 +99,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 | name               | type                       | required  | default                   | values                                            | description                                                                                                                                                     |
 | ------------------ | -------------------------- | --------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `className`        | `string`                   | no        |                           |                                                   | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally                                             |
-| `classNameArrow`   | `string`                   | no        |                           |                                                   | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally                                                                                                                  |
+| `classNameArrow`   | `string`                   | no        |                           |                                                   | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally                                 |
 | `content`          | `string`                   | no        |                           |                                                   | Content to de displayed in tooltip (`html` prop is priorized over `content`)                                                                                    |
 | ~~`html`~~         | ~~`string`~~               | ~~no~~    |                           |                                                   | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead                                                          |
 | `render`           | `function`                 | no        |                           |                                                   | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx)     |
@@ -116,12 +117,13 @@ import 'react-tooltip/dist/react-tooltip.css'
 | `delayShow`        | `number`                   | no        |                           | any `number`                                      | The delay (in ms) before showing the tooltip                                                                                                                    |
 | `delayHide`        | `number`                   | no        |                           | any `number`                                      | The delay (in ms) before hiding the tooltip                                                                                                                     |
 | `float`            | `boolean`                  | no        | `false`                   | `true` `false`                                    | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                                                  |
+| `hidden`           | `boolean`                  | no        | `false`                   | `true` `false`                                    | Tooltip will not be shown                                                                                                                                       |
 | `noArrow`          | `boolean`                  | no        | `false`                   | `true` `false`                                    | Tooltip arrow will not be shown                                                                                                                                 |
 | `clickable`        | `boolean`                  | no        | `false`                   | `true` `false`                                    | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs                                                                        |
 | `closeOnEsc`       | `boolean`                  | no        | `false`                   | `true` `false`                                    | Pressing escape key will close the tooltip                                                                                                                      |
 | `style`            | `CSSProperties`            | no        |                           | a React inline style                              | Add inline styles directly to the tooltip                                                                                                                       |
 | `position`         | `{ x: number; y: number }` | no        |                           | any `number` value for both `x` and `y`           | Override the tooltip position on the DOM                                                                                                                        |
-| `isOpen`           | `boolean`                   no        | 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`) |
+| `isOpen`           | `boolean`                  | no        | 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`) |
 | `setIsOpen`        | `function`                 | no        |                           |                                                   | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip                                       |
 | `afterShow`        | `function`                 | no        |                           |                                                   | A function to be called after the tooltip is shown                                                                                                              |
 | `afterHide`        | `function`                 | no        |                           |                                                   | A function to be called after the tooltip is hidden                                                                                                             |
diff --git a/docs/docs/upgrade-guide/changelog-v4-v5.md b/docs/docs/upgrade-guide/changelog-v4-v5.md
index 97c1c84a..d111d0e3 100644
--- a/docs/docs/upgrade-guide/changelog-v4-v5.md
+++ b/docs/docs/upgrade-guide/changelog-v4-v5.md
@@ -48,6 +48,7 @@ If you run into any problems with the tooltip not updating after changes are mad
 - [x] `setIsOpen` - `function` (to control tooltip state) - if not used, tooltip state will be handled internally
 - [x] `position` - `{ x: number; y: number }` - similar to V4's `overridePosition`
 - [x] `float` - `boolean` - used to achieve V4's `effect="float"`
+- [x] `hidden` - `boolean` - when set, the tooltip will not show
 - [x] `render` - `function` - can be used to render dynamic content based on the active anchor element (check [the examples](../examples/render.mdx) for more details)
 
 ## `V4` props available in `V5`

From 55f1a4691bdcf3a57fa4ac1ddbea68959ae08e43 Mon Sep 17 00:00:00 2001
From: gabrieljablonski <contact@gabrieljablonski.com>
Date: Tue, 16 May 2023 09:33:43 -0300
Subject: [PATCH 3/3] fix: update internal states correctly

---
 .../TooltipController/TooltipController.tsx   | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
index a535cd59..185947c1 100644
--- a/src/components/TooltipController/TooltipController.tsx
+++ b/src/components/TooltipController/TooltipController.tsx
@@ -138,6 +138,34 @@ const TooltipController = ({
     setTooltipPlace(place)
   }, [place])
 
+  useEffect(() => {
+    setTooltipVariant(variant)
+  }, [variant])
+
+  useEffect(() => {
+    setTooltipOffset(offset)
+  }, [offset])
+
+  useEffect(() => {
+    setTooltipDelayShow(delayShow)
+  }, [delayShow])
+
+  useEffect(() => {
+    setTooltipDelayHide(delayHide)
+  }, [delayHide])
+
+  useEffect(() => {
+    setTooltipFloat(float)
+  }, [float])
+
+  useEffect(() => {
+    setTooltipHidden(hidden)
+  }, [hidden])
+
+  useEffect(() => {
+    setTooltipPositionStrategy(positionStrategy)
+  }, [positionStrategy])
+
   useEffect(() => {
     const elementRefs = new Set(anchorRefs)