diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 894f805a..615aa890 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/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(`[id='${anchorId}']`) diff --git a/src/components/Tooltip/TooltipTypes.d.ts b/src/components/Tooltip/TooltipTypes.d.ts index 2045a5f9..9026c580 100644 --- a/src/components/Tooltip/TooltipTypes.d.ts +++ b/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 place?: PlacesType offset?: number id?: string diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx index 68552eaf..202ac8cd 100644 --- a/src/components/TooltipController/TooltipController.tsx +++ b/src/components/TooltipController/TooltipController.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import { 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(null) if (render) { - renderedContent = render({ content: tooltipContent ?? null, activeAnchor }) + renderedContent = ( +
+ {render({ content: tooltipContent ?? null, activeAnchor }) as React.ReactNode} +
+ ) } else if (tooltipContent) { renderedContent = tooltipContent } @@ -221,6 +226,7 @@ const TooltipController = ({ className, classNameArrow, content: renderedContent, + contentWrapperRef, place: tooltipPlace, variant: tooltipVariant, offset: tooltipOffset,