Tooltip not rendered when children has ref

[rodsjo]

Describe the bug

When children-components for the <Tooltip>-component has ref, the tooltip is not shown. I saw this issue #4006 , and it is marked as solved, but is it really solved?

When focusing the children with the ref, the tooltip is shown, but it is misplaced.

Steps to reproduce the bug

import { Button, Tooltip } from '@equinor/eds-core-react';
import { useRef } from 'react';
import styled from 'styled-components';
import packageJson from '../../package.json';

const Center = styled.div`
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    height: 100vh;
`;

export function TooltipPage() {
  const buttonRef1 = useRef<HTMLButtonElement>(null);
  const buttonRef2 = useRef<HTMLButtonElement>(null);

  return (
    <Center>
      <Tooltip title="Lorem ipsum">
        <Button>Button (children without ref)</Button>
      </Tooltip>
      <Tooltip title="Lorem ipsum">
        <Button ref={buttonRef1}>Button (children with ref)</Button>
      </Tooltip>
      <Tooltip title="Lorem ipsum">
        <div>
          <Button ref={buttonRef2}>
            Button (children with ref, children wrapped in div)
          </Button>
        </div>
      </Tooltip>
      <div>
        react version: {packageJson.dependencies.react}
        <br />
        react-dom version: {packageJson.dependencies['react-dom']}
        <br />
        @equinor/eds-core-react version:{' '}
        {packageJson.dependencies['@equinor/eds-core-react']}
      </div>
    </Center>
  );
}

Hover button that has no ref:

Hover button that has a ref:

Focus button that has a ref, tooltip is misplaced:

Expected behavior

Tooltip should be rendered even though children has ref.

Specifications

• @equinor/eds-core-react version: 1.0.1
• react version: 19.2.0
• Browser: Firefox version 144
• OS: macOS Tahoe

[rodsjo]

Additionally:

[pomfrida]

Hi @rodsjo
Thank you for the detailed bug report and clear example! 🙌

After investigating the issue further, I was able to reproduce the console error you mentioned regarding the use of ref on child components of Tooltip. However, unlike in your case, it seems that the actual positioning and rendering of the Tooltip is working as expected on my end.. Regardless, the warning from React 19 about accessing element.ref is definitely something we need to address internally in the Tooltip implementation. I'll update the component to ensure full compatibility without requiring any workarounds.