Fine-tune delays in Tooltip and associated components

.changeset/selfish-foxes-punch.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fine-tuned the default Tooltip delay to `{ open: 100ms, close: 200ms }`.

.changeset/seven-parents-complain.md

@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Added `Tooltip` delay grouping to components that use `Tooltip` internally. This prevents the tooltip from lingering when quickly hovering across different parts of the component.
+* Components affected: `SideNavigation`, `Slider`, `Stepper`, `List`.

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

@@ -19,7 +19,7 @@ describe('AvatarGroup', () => {
 
       if (testName.includes('Tooltip')) {
         cy.get('div').contains('3').trigger('mouseenter');
-        cy.wait(50);
+        cy.wait(100);
       }
 
       cy.compareSnapshot(testName);

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

@@ -27,7 +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.wait(100);
       }
 
       cy.compareSnapshot(testName);

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

@@ -14,7 +14,7 @@ describe('Stepper', () => {
       if (testName.includes('Tooltip')) {
         cy.get('#ladle-root').within(() => {
           cy.get('li').first().trigger('mouseenter'); // trigger tooltip
-          cy.wait(50);
+          cy.wait(100);
         });
       }
 

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

@@ -11,7 +11,7 @@ describe('Tooltip', () => {
       const id = Cypress.storyId(storyPath, testName);
       cy.visit('/', { qs: { mode: 'preview', story: id } });
       cy.get('#tooltip-target').trigger('mouseenter');
-      cy.wait(50);
+      cy.wait(100);
       cy.compareSnapshot(testName);
     });
   });

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

@@ -14,7 +14,7 @@ describe('WorkflowDiagram', () => {
       if (testName.includes('Tooltip')) {
         cy.get('#ladle-root').within(() => {
           cy.get('li').first().trigger('mouseenter'); // trigger tooltip
-          cy.wait(50);
+          cy.wait(100);
         });
       }
 

examples/DropdownMenu.hidemiddleware.css

@@ -1,7 +1,3 @@
-.demo-container {
-  width: 50%;
-}
-
 .list {
   overflow-y: auto;
   max-height: 200px;

examples/DropdownMenu.hidemiddleware.jsx

@@ -29,7 +29,7 @@ export default () => {
   const items = new Array(30).fill(0);
 
   return (
-    <Surface className='demo-container'>
+    <Surface>
       <Surface.Body as={List} className='list'>
         {items.map((_, i) => (
           <ListItem key={i}>

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

@@ -14,6 +14,7 @@ import {
   CompositeItem,
   FloatingDelayGroup,
 } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 
 // ----------------------------------------------------------------------------
 
@@ -131,7 +132,7 @@ export const ButtonGroup = React.forwardRef((props, forwardedRef) => {
   );
 
   return (
-    <FloatingDelayGroup delay={{ open: 50, close: 250 }}>
+    <FloatingDelayGroup delay={defaultTooltipDelay}>
       <ButtonGroupContext.Provider value={orientation}>
         {props.role === 'toolbar' ? (
           <Composite

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

@@ -2,9 +2,18 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { polymorphic } from '../../utils/index.js';
+import * as React from 'react';
+import { Box, type PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 
-export const List = polymorphic.div('iui-list', { role: 'list' });
+export const List = React.forwardRef((props, ref) => {
+  return (
+    <FloatingDelayGroup delay={defaultTooltipDelay}>
+      <Box as='div' ref={ref} className='iui-list' role='list' {...props} />
+    </FloatingDelayGroup>
+  );
+}) as PolymorphicForwardRefComponent<'div'>;
 if (process.env.NODE_ENV === 'development') {
   List.displayName = 'List';
 }

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

@@ -12,6 +12,8 @@ import {
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 
 // ----------------------------------------------------------------------------
 
@@ -142,41 +144,43 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
         className={cx('iui-side-navigation-wrapper', wrapperProps?.className)}
         ref={forwardedRef}
       >
-        <Box
-          as='div'
-          className={cx(
-            'iui-side-navigation',
-            {
-              'iui-expanded': isExpanded,
-              'iui-collapsed': !isExpanded,
-            },
-            className,
-          )}
-          {...rest}
-        >
-          {expanderPlacement === 'top' && ExpandButton}
+        <FloatingDelayGroup delay={defaultTooltipDelay}>
           <Box
             as='div'
-            {...contentProps}
-            className={cx('iui-sidenav-content', contentProps?.className)}
+            className={cx(
+              'iui-side-navigation',
+              {
+                'iui-expanded': isExpanded,
+                'iui-collapsed': !isExpanded,
+              },
+              className,
+            )}
+            {...rest}
           >
+            {expanderPlacement === 'top' && ExpandButton}
             <Box
               as='div'
-              {...topProps}
-              className={cx('iui-top', topProps?.className)}
+              {...contentProps}
+              className={cx('iui-sidenav-content', contentProps?.className)}
             >
-              {items}
-            </Box>
-            <Box
-              as='div'
-              {...bottomProps}
-              className={cx('iui-bottom', bottomProps?.className)}
-            >
-              {secondaryItems}
+              <Box
+                as='div'
+                {...topProps}
+                className={cx('iui-top', topProps?.className)}
+              >
+                {items}
+              </Box>
+              <Box
+                as='div'
+                {...bottomProps}
+                className={cx('iui-bottom', bottomProps?.className)}
+              >
+                {secondaryItems}
+              </Box>
             </Box>
+            {expanderPlacement === 'bottom' && ExpandButton}
           </Box>
-          {expanderPlacement === 'bottom' && ExpandButton}
-        </Box>
+        </FloatingDelayGroup>
 
         {submenu && (
           <WithCSSTransition

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

@@ -9,6 +9,8 @@ import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { Track } from './Track.js';
 import { Thumb } from './Thumb.js';
 import type { Tooltip } from '../Tooltip/Tooltip.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 
 /**
  * Determines which segments are shown with color.
@@ -492,49 +494,51 @@ export const Slider = React.forwardRef((props, ref) => {
           {minValueLabel}
         </Box>
       )}
-      <Box
-        ref={containerRef}
-        {...trackContainerProps}
-        className={cx(
-          'iui-slider',
-          {
-            'iui-grabbing': undefined !== activeThumbIndex,
-          },
-          trackContainerProps?.className,
-        )}
-        onPointerDown={handlePointerDownOnSlider}
-      >
-        {currentValues.map((thumbValue, index) => {
-          const [minVal, maxVal] = getAllowableThumbRange(index);
-          const thisThumbProps = thumbProps?.(index);
-          return (
-            <Thumb
-              key={thisThumbProps?.id ?? index}
-              index={index}
-              disabled={disabled}
-              isActive={activeThumbIndex === index}
-              onThumbActivated={onThumbActivated}
-              onThumbValueChanged={onThumbValueChanged}
-              minVal={minVal}
-              maxVal={maxVal}
-              value={thumbValue}
-              tooltipProps={generateTooltipProps(index, thumbValue)}
-              thumbProps={thisThumbProps}
-              step={step}
-              sliderMin={min}
-              sliderMax={max}
-            />
-          );
-        })}
-        <Track
-          trackDisplayMode={trackDisplay}
-          sliderMin={min}
-          sliderMax={max}
-          values={currentValues}
-          orientation={orientation}
-          {...trackProps}
-        />
-      </Box>
+      <FloatingDelayGroup delay={defaultTooltipDelay}>
+        <Box
+          ref={containerRef}
+          {...trackContainerProps}
+          className={cx(
+            'iui-slider',
+            {
+              'iui-grabbing': undefined !== activeThumbIndex,
+            },
+            trackContainerProps?.className,
+          )}
+          onPointerDown={handlePointerDownOnSlider}
+        >
+          {currentValues.map((thumbValue, index) => {
+            const [minVal, maxVal] = getAllowableThumbRange(index);
+            const thisThumbProps = thumbProps?.(index);
+            return (
+              <Thumb
+                key={thisThumbProps?.id ?? index}
+                index={index}
+                disabled={disabled}
+                isActive={activeThumbIndex === index}
+                onThumbActivated={onThumbActivated}
+                onThumbValueChanged={onThumbValueChanged}
+                minVal={minVal}
+                maxVal={maxVal}
+                value={thumbValue}
+                tooltipProps={generateTooltipProps(index, thumbValue)}
+                thumbProps={thisThumbProps}
+                step={step}
+                sliderMin={min}
+                sliderMax={max}
+              />
+            );
+          })}
+          <Track
+            trackDisplayMode={trackDisplay}
+            sliderMin={min}
+            sliderMax={max}
+            values={currentValues}
+            orientation={orientation}
+            {...trackProps}
+          />
+        </Box>
+      </FloatingDelayGroup>
       {tickMarkArea}
       {maxValueLabel && (
         <Box

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

@@ -273,7 +273,7 @@ it('should display tooltip upon hovering step if description provided', async ()
 
   expect(document.querySelector('.iui-tooltip')).not.toBeVisible();
   fireEvent.mouseEnter(screen.getByText('Step One'), { bubbles: true });
-  act(() => void vi.advanceTimersByTime(50));
+  act(() => void vi.advanceTimersByTime(100));
   const tooltip = document.querySelector('.iui-tooltip') as HTMLElement;
   expect(tooltip).toBeVisible();
   expect(tooltip).toHaveTextContent('Step one tooltip');
@@ -282,7 +282,7 @@ it('should display tooltip upon hovering step if description provided', async ()
   act(() => void vi.advanceTimersByTime(250));
 
   fireEvent.mouseEnter(screen.getByText('Step Three'), { bubbles: true });
-  act(() => void vi.advanceTimersByTime(50));
+  act(() => void vi.advanceTimersByTime(200));
   expect(tooltip).not.toBeVisible();
 
   vi.useRealTimers();

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

@@ -7,6 +7,8 @@ import * as React from 'react';
 import { Box } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { StepperStep } from './StepperStep.js';
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { defaultTooltipDelay } from '../Tooltip/Tooltip.js';
 
 export type StepperLocalization = {
   stepsCountLabel: (currentStep: number, totalSteps: number) => string;
@@ -103,31 +105,33 @@ export const Stepper = React.forwardRef((props, ref) => {
 
   return (
     <Box className={'iui-stepper'} ref={ref} {...rest}>
-      <ol>
-        {steps.map((s, index) => {
-          const thisStepProps = stepProps?.(index);
-          const thisTrackContentProps = trackContentProps?.(index);
-          const thisCircleProps = circleProps?.(index);
-          const thisNameProps = nameProps?.(index);
-          return (
-            <StepperStep
-              stepProps={thisStepProps}
-              trackContentProps={thisTrackContentProps}
-              circleProps={thisCircleProps}
-              nameProps={thisNameProps}
-              key={index}
-              index={index}
-              title={type === 'long' ? '' : s.name}
-              currentStepNumber={boundedCurrentStep}
-              totalSteps={steps.length}
-              type={type}
-              onClick={onStepClick}
-              description={s.description}
-              stepContent={s.stepContent}
-            />
-          );
-        })}
-      </ol>
+      <FloatingDelayGroup delay={defaultTooltipDelay}>
+        <ol>
+          {steps.map((s, index) => {
+            const thisStepProps = stepProps?.(index);
+            const thisTrackContentProps = trackContentProps?.(index);
+            const thisCircleProps = circleProps?.(index);
+            const thisNameProps = nameProps?.(index);
+            return (
+              <StepperStep
+                stepProps={thisStepProps}
+                trackContentProps={thisTrackContentProps}
+                circleProps={thisCircleProps}
+                nameProps={thisNameProps}
+                key={index}
+                index={index}
+                title={type === 'long' ? '' : s.name}
+                currentStepNumber={boundedCurrentStep}
+                totalSteps={steps.length}
+                type={type}
+                onClick={onStepClick}
+                description={s.description}
+                stepContent={s.stepContent}
+              />
+            );
+          })}
+        </ol>
+      </FloatingDelayGroup>
       {type === 'long' && (
         <Box
           as='div'