Merge branch 'master' into chore/dependencies-external

Author: danielbarion

docs/docs/options.mdx

@@ -121,7 +121,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 | `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`           | `boolen`                   | 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                                                                                                             |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.10.1",
+  "version": "5.10.4",
   "description": "react tooltip component",
   "scripts": {
     "dev-rollup": "node ./prebuild.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",

src/components/Tooltip/Tooltip.tsx

@@ -34,6 +34,7 @@ const Tooltip = ({
   afterHide,
   // props handled by controller
   content,
+  contentWrapperRef,
   isOpen,
   setIsOpen,
   activeAnchor,
@@ -425,7 +426,7 @@ const Tooltip = ({
     }
   }, [id, anchorSelect, activeAnchor])
 
-  useEffect(() => {
+  const updateTooltipPosition = () => {
     if (position) {
       // if `position` is set, override regular and `float` positioning
       handleTooltipPosition(position)
@@ -468,7 +469,24 @@ const Tooltip = ({
       }
       setActualPlacement(computedStylesData.place as PlacesType)
     })
-  }, [show, activeAnchor, content, place, offset, positionStrategy, position])
+  }
+
+  useEffect(() => {
+    updateTooltipPosition()
+  }, [show, activeAnchor, content, externalStyles, place, offset, positionStrategy, position])
+
+  useEffect(() => {
+    if (!contentWrapperRef?.current) {
+      return () => null
+    }
+    const contentObserver = new ResizeObserver(() => {
+      updateTooltipPosition()
+    })
+    contentObserver.observe(contentWrapperRef.current)
+    return () => {
+      contentObserver.disconnect()
+    }
+  }, [content, contentWrapperRef?.current])
 
   useEffect(() => {
     const anchorById = document.querySelector<HTMLElement>(`[id='${anchorId}']`)

src/components/Tooltip/TooltipTypes.d.ts

@@ -1,4 +1,4 @@
-import type { ElementType, ReactNode, CSSProperties } from 'react'
+import type { ElementType, ReactNode, CSSProperties, RefObject } from 'react'
 
 export type PlacesType = 'top' | 'right' | 'bottom' | 'left'
 
@@ -40,6 +40,7 @@ export interface ITooltip {
   className?: string
   classNameArrow?: string
   content?: ChildrenType
+  contentWrapperRef?: RefObject<HTMLDivElement>
   place?: PlacesType
   offset?: number
   id?: string

src/components/TooltipController/TooltipController.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Tooltip } from 'components/Tooltip'
 import type {
   EventsType,
@@ -205,8 +205,13 @@ const TooltipController = ({
    * children should be lower priority so that it can be used as the "default" content
    */
   let renderedContent: ChildrenType = children
+  const contentWrapperRef = useRef<HTMLDivElement>(null)
   if (render) {
-    renderedContent = render({ content: tooltipContent ?? null, activeAnchor })
+    renderedContent = (
+      <div ref={contentWrapperRef} className="react-tooltip-content-wrapper">
+        {render({ content: tooltipContent ?? null, activeAnchor }) as React.ReactNode}
+      </div>
+    )
   } else if (tooltipContent) {
     renderedContent = tooltipContent
   }
@@ -221,6 +226,7 @@ const TooltipController = ({
     className,
     classNameArrow,
     content: renderedContent,
+    contentWrapperRef,
     place: tooltipPlace,
     variant: tooltipVariant,
     offset: tooltipOffset,