diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx index 16339618..554e8001 100644 --- a/docs/docs/options.mdx +++ b/docs/docs/options.mdx @@ -112,6 +112,8 @@ import { Tooltip } from 'react-tooltip'; | `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 | +| `closeOnScroll` | `boolean` | no | `false` | `true` `false` | Scrolling anywhere on the window will close the tooltip | +| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Resizing the window 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`) | diff --git a/docs/docs/upgrade-guide/changelog-v4-v5.md b/docs/docs/upgrade-guide/changelog-v4-v5.md index d111d0e3..f911acce 100644 --- a/docs/docs/upgrade-guide/changelog-v4-v5.md +++ b/docs/docs/upgrade-guide/changelog-v4-v5.md @@ -50,6 +50,8 @@ If you run into any problems with the tooltip not updating after changes are mad - [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) +- [x] `closeOnScroll` - `boolean` - when set, the tooltip will close when scrolling anywhere on the window +- [x] `closeOnResize` - `boolean` - when set, the tooltip will close when resizing the window ## `V4` props available in `V5` diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index ab9d2e1b..20b39b40 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -29,6 +29,8 @@ const Tooltip = ({ noArrow = false, clickable = false, closeOnEsc = false, + closeOnScroll = false, + closeOnResize = false, style: externalStyles, position, afterShow, @@ -300,6 +302,12 @@ const Tooltip = ({ elementRefs.add({ current: anchorById }) } + if (closeOnScroll) { + window.addEventListener('scroll', debouncedHandleHideTooltip) + } + if (closeOnResize) { + window.addEventListener('resize', debouncedHandleHideTooltip) + } if (closeOnEsc) { window.addEventListener('keydown', handleEsc) } @@ -344,6 +352,12 @@ const Tooltip = ({ }) return () => { + if (closeOnScroll) { + window.removeEventListener('scroll', debouncedHandleHideTooltip) + } + if (closeOnResize) { + window.removeEventListener('resize', debouncedHandleHideTooltip) + } if (shouldOpenOnClick) { window.removeEventListener('click', handleClickOutsideAnchors) } diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index 7fd3431c..5d35edc5 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/src/components/Tooltip/TooltipTypes.d.ts @@ -67,6 +67,8 @@ export interface ITooltip { noArrow?: boolean clickable?: boolean closeOnEsc?: boolean + closeOnScroll?: boolean + closeOnResize?: boolean style?: CSSProperties position?: IPosition isOpen?: boolean diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 376de7ac..0bdb3e72 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -39,6 +39,8 @@ const TooltipController = ({ noArrow = false, clickable = false, closeOnEsc = false, + closeOnScroll = false, + closeOnResize = false, style, position, isOpen, @@ -276,6 +278,8 @@ const TooltipController = ({ noArrow, clickable, closeOnEsc, + closeOnScroll, + closeOnResize, style, position, isOpen, diff --git a/src/components/TooltipController/TooltipControllerTypes.d.ts b/src/components/TooltipController/TooltipControllerTypes.d.ts index 31842e4a..674225e1 100644 --- a/src/components/TooltipController/TooltipControllerTypes.d.ts +++ b/src/components/TooltipController/TooltipControllerTypes.d.ts @@ -45,7 +45,18 @@ export interface ITooltipController { hidden?: boolean noArrow?: boolean clickable?: boolean + /** + * @todo refactor to `hideOnEsc` for naming consistency + */ closeOnEsc?: boolean + /** + * @todo refactor to `hideOnScroll` for naming consistency + */ + closeOnScroll?: boolean + /** + * @todo refactor to `hideOnResize` for naming consistency + */ + closeOnResize?: boolean style?: CSSProperties position?: IPosition isOpen?: boolean