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~~
**DEPRECATED**
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`
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 ? (
(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
@@ -133,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)
@@ -239,6 +272,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
}
}