Fix missing default Tooltip delay (#2263)

.changeset/clean-avocados-joke.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Default `Tooltip` delay is now correctly applied.

apps/react-workshop/src/Breadcrumbs.test.ts

@@ -27,6 +27,7 @@ describe('Breadcrumbs', () => {
         cy.get('button').eq(1).click();
       } else if (testName === 'Custom Overflow Back Button') {
         cy.get('button').eq(1).trigger('mouseenter');
+        cy.wait(60);
       }
 
       cy.compareSnapshot(testName);

packages/itwinui-react/src/core/Slider/Slider.test.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { act, fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import { Slider } from './Slider.js';
 import { userEvent } from '@testing-library/user-event';
 
@@ -503,14 +503,13 @@ it('should show tooltip on thumb hover', async () => {
   expect(thumb.classList).not.toContain('iui-active');
   expect(document.querySelector('.iui-tooltip')).toBeNull();
 
-  vi.useFakeTimers();
   fireEvent.mouseEnter(thumb);
-  act(() => void vi.advanceTimersByTime(50));
-  vi.useRealTimers();
 
-  const tooltip = document.querySelector('.iui-tooltip');
-  expect(tooltip).toBeVisible();
-  expect(tooltip).toHaveTextContent('50');
+  await waitFor(() => {
+    const tooltip = document.querySelector('.iui-tooltip');
+    expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveTextContent('50');
+  });
 });
 
 it('should show tooltip on thumb focus', async () => {

packages/itwinui-react/src/core/Tooltip/Tooltip.test.tsx

@@ -2,11 +2,11 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { act, fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import * as React from 'react';
 import { Tooltip } from './Tooltip.js';
 
-it('should toggle the visibility of tooltip on hover', () => {
+it('should toggle the visibility of tooltip on hover', async () => {
   const onVisibleChange = vi.fn();
 
   const { getByText } = render(
@@ -23,11 +23,11 @@ it('should toggle the visibility of tooltip on hover', () => {
   expect(tooltip).toHaveAttribute('popover', 'manual');
 
   fireEvent.mouseEnter(trigger);
-  expect(tooltip).toBeVisible();
+  await waitFor(() => expect(tooltip).toBeVisible());
   expect(onVisibleChange).toBeCalledWith(true);
 
   fireEvent.mouseLeave(trigger);
-  expect(tooltip).not.toBeVisible();
+  await waitFor(() => expect(tooltip).not.toBeVisible());
   expect(onVisibleChange).toBeCalledWith(false);
 });
 
@@ -135,8 +135,6 @@ it.each(['description', 'label', 'none'] as const)(
 );
 
 it('should work with reference prop', async () => {
-  vi.useFakeTimers();
-
   const TestComp = () => {
     const [reference, setReference] = React.useState<HTMLElement | null>(null);
     return (
@@ -155,18 +153,14 @@ it('should work with reference prop', async () => {
   expect(tooltip).not.toBeVisible();
 
   fireEvent.mouseEnter(trigger);
-  expect(tooltip).toBeVisible();
+  await waitFor(() => void expect(tooltip).toBeVisible());
 
   fireEvent.mouseLeave(trigger);
-  expect(tooltip).not.toBeVisible();
+  await waitFor(() => void expect(tooltip).not.toBeVisible());
 
   fireEvent.focus(trigger);
-  act(() => void vi.advanceTimersByTime(50));
-  expect(tooltip).toBeVisible();
+  await waitFor(() => void expect(tooltip).toBeVisible());
 
   fireEvent.blur(trigger);
-  act(() => void vi.advanceTimersByTime(250));
-  expect(tooltip).not.toBeVisible();
-
-  vi.useRealTimers();
+  await waitFor(() => void expect(tooltip).not.toBeVisible());
 });

packages/itwinui-react/src/core/Tooltip/Tooltip.tsx

@@ -197,7 +197,7 @@ const useTooltip = (options: TooltipOptions = {}) => {
 
   const interactions = useInteractions([
     useHover(floating.context, {
-      delay: delay ?? { open: 50, close: 250 },
+      delay: delay !== 0 ? delay : { open: 50, close: 250 }, // If FloatingDelayGroup exists, use its delay
       handleClose: safePolygon({ buffer: -Infinity }),
       move: false,
     }),