closeOnScroll and closeOnResize props

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`) |

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`
 

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)
       }

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

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,

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