Tooltip hover simulation not working in Chrome and Firefox

[xiaoxiaobt]

Hello, I'm trying to simulate hover behavior on a Tooltip component using the :hover pseudo-class in Chrome and Firefox, but the Tooltip doesn't appear.

What's the correct approach to trigger Tooltip visibility for testing/debugging purposes?

[sunnypatell]

@xiaoxiaobt the DevTools :hover toggle only applies the CSS pseudo-class, it doesn't fire JavaScript events. radix tooltip uses onPointerMove / onPointerLeave exclusively for open/close logic (tooltip.tsx), not CSS :hover. so forcing :hover via DevTools has no effect.

to inspect the tooltip in DevTools:

1. force it open via props:

<Tooltip.Root open={true}>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>Tooltip text</Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>

2. tab-focus the trigger. onFocus also opens the tooltip (for accessibility), so pressing Tab to focus the trigger button works. combine with Chrome's "Emulate a focused page" (Rendering panel) to prevent it closing when you click into DevTools.

3. for testing (e.g., with Testing Library), use userEvent.hover() which dispatches real pointer events:

const trigger = screen.getByRole('button');
await userEvent.hover(trigger);
expect(screen.getByText('Tooltip text')).toBeVisible();

the delayDuration prop (default 700ms) controls how long before the tooltip appears on hover. set delayDuration={0} in dev/tests to make it instant.

[xiaoxiaobt]

Hello @sunnypatell, thank you for the tip! The "Emulate a focused page" was exactly the thing I was looking for, thank you so much for your help!