diff --git a/packages/react/src/components/tooltip/tooltip.test.tsx.snap b/packages/react/src/components/tooltip/tooltip.test.tsx.snap index 8cea951009..0c1cc7509f 100644 --- a/packages/react/src/components/tooltip/tooltip.test.tsx.snap +++ b/packages/react/src/components/tooltip/tooltip.test.tsx.snap @@ -220,7 +220,6 @@ exports[`Tooltip Has default desktop styles (defaultOpen) 1`] = ` data-testid="tooltip-content-container" id="uuid1" isMobile={false} - key="1" role="tooltip" style={ { @@ -493,7 +492,6 @@ exports[`Tooltip Has default desktop styles 1`] = ` data-testid="tooltip-content-container" id="uuid1" isMobile={false} - key="1" role="tooltip" style={ { @@ -770,7 +768,6 @@ exports[`Tooltip Has mobile styles (defaultOpen) 1`] = ` data-testid="tooltip-content-container" id="uuid1" isMobile={true} - key="1" role="tooltip" style={ { @@ -1043,7 +1040,6 @@ exports[`Tooltip Has mobile styles 1`] = ` data-testid="tooltip-content-container" id="uuid1" isMobile={true} - key="1" role="tooltip" style={ { diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx index 43b0b4c62d..35cfc1720b 100644 --- a/packages/react/src/components/tooltip/tooltip.tsx +++ b/packages/react/src/components/tooltip/tooltip.tsx @@ -232,14 +232,9 @@ export const Tooltip: FunctionComponent> = ({ const [tooltipTimeout, setTooltipTimeout] = useState(); const [controlledTooltipOpen, setControlledTooltipOpen] = useState(); const [isClicked, setIsClicked] = useState(false); - const [tooltipKey, setTooltipKey] = useState(0); const currentLabel = isClicked ? (confirmationLabel ?? label) : label; const tooltipVariant = (mode === 'confirm' && isClicked) ? 'success' : 'normal'; - useEffect(() => { - setTooltipKey((prevKey) => prevKey + 1); - }, [currentLabel]); - const getTooltipTriggerType = useCallback((): TriggerType | null => { if (disabled) { return null; @@ -259,6 +254,10 @@ export const Tooltip: FunctionComponent> = ({ delayShow: delayed ? titleDelay : undefined, }, { modifiers }); + useEffect(() => { + popperTooltip.update?.(); + }, [currentLabel, popperTooltip]); + const openTooltip = useCallback((): void => { if (delayed && !disabled) { setTooltipTimeout(() => setTimeout(() => setControlledTooltipOpen(true), titleDelay)); @@ -370,7 +369,6 @@ export const Tooltip: FunctionComponent> = ({ isMobile={isMobile} variant={tooltipVariant} visible={popperTooltip.visible} - key={tooltipKey} {...popperTooltip.getTooltipProps() /* eslint-disable-line react/jsx-props-no-spreading */} >