feat(tooltip): add delay and closeDelay props for timing control

[invisal]

Summary

Add delay and closeDelay props to the Tooltip component to allow developers to control the timing of tooltip open and close actions.

Changes

• Expose delay prop to control how long to wait before opening the tooltip (default: 600ms)
• Expose closeDelay prop to control how long to wait before closing the tooltip (default: 0ms)
• Add demo example showing various delay configurations
• Update documentation with delay control section
• Include changeset for minor version bump

API

<Tooltip content="Opens after 1 second" delay={1000}>
  <Button>1s delay</Button>
</Tooltip>

<Tooltip content="Stays open longer" closeDelay={500}>
  <Button>500ms close delay</Button>
</Tooltip>

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@353

commit: 53bbf29

[github-actions]

Docs Preview

View docs preview

Commit: 53bbf29

[geoquant]

/bonk review

[ask-bonk]

Thanks for this PR! The implementation looks good overall. I have one concern about the demo that should be addressed before merging.

Overall Assessment:

• ✅ Clean API following existing patterns
• ✅ Props correctly forwarded to Base UI Trigger
• ✅ Documentation and changeset included
• ⚠️ Demo may not work as expected due to TooltipProvider delay grouping

The issue is that TooltipProvider implements delay grouping - after the first tooltip opens, subsequent tooltips skip their open delay. This means users may not actually experience the 1-second delay in the demo if they hover over multiple buttons in sequence.

[ask-bonk]

This demo has a subtle issue: TooltipProvider groups tooltips so that after the first one opens, subsequent tooltips skip their open delay. This means users may not actually experience the 1-second delay when hovering between buttons.

Consider wrapping each Tooltip in its own provider, or adding a comment explaining this behavior:

Suggested change

	export function TooltipDelayDemo() {
	/**
	* Control the delay before opening and closing the tooltip.
	* `delay` controls open delay (default: 600ms), `closeDelay` controls close delay (default: 0ms).
	*
	* Note: Each Tooltip has its own TooltipProvider so the delay grouping
	* behavior doesn't interfere with demonstrating the delay props.
	*/
	export function TooltipDelayDemo() {
	return (
	<div className="flex gap-4">
	<TooltipProvider>
	<Tooltip content="Opens after 1 second" delay={1000} asChild>
	<Button variant="secondary">1s open delay</Button>
	</Tooltip>
	</TooltipProvider>
	<TooltipProvider>
	<Tooltip
	content="Stays open 500ms after leaving"
	closeDelay={500}
	asChild
	>
	<Button variant="secondary">500ms close delay</Button>
	</Tooltip>
	</TooltipProvider>
	<TooltipProvider>
	<Tooltip
	content="Instant open, stays 1s"
	delay={0}
	closeDelay={1000}
	asChild
	>
	<Button variant="secondary">Instant + 1s close</Button>
	</Tooltip>
	</TooltipProvider>
	</div>
	);
	}

[ask-bonk]

I've posted my review on PR #353. Here's a summary of my feedback:

Review Summary

The implementation is clean and follows the established patterns in the codebase:

1. tooltip.tsx - The props are correctly typed with JSDoc comments and properly forwarded to the Base UI Trigger component.

2. TooltipDemo.tsx - The demo is well-structured, but I identified a potential issue: TooltipProvider implements delay grouping, which means after the first tooltip opens, subsequent tooltips skip their open delay. This could make the demo confusing for users trying to experience the 1-second delay.

3. tooltip.mdx - Documentation is clear and includes the new demo.

4. tooltip-delay-props.md - Changeset is appropriate for a minor version bump.

Key Suggestion: Each tooltip in the demo should be wrapped in its own TooltipProvider to ensure the delay grouping behavior doesn't interfere with demonstrating the delay props. I've provided a code suggestion in the review that addresses this issue.

github run

[github-actions]

Visual Regression Report

17 screenshot(s) with visual changes:

Button / Variant: Outline

152 px (0.15%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

873 px (0.86%) changed

Before	After	Diff

Button / Loading State

0 px (0%) changed

Before	After	Diff

Button / Title

272 px (0.27%) changed

Before	After	Diff

Dialog / Dialog With Actions

138 px (0.14%) changed

Before	After	Diff

Dialog / Dialog Basic

259 px (0.26%) changed

Before	After	Diff

Dialog / Dialog Alert

1,968 px (1.94%) changed

Before	After	Diff

Dialog / Dialog Confirmation

1,097 px (1.08%) changed

Before	After	Diff

Dialog / Dialog With Select

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Combobox

130 px (0.13%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select With Field

0 px (0%) changed

Before	After	Diff

Select / Select With Tooltip

557 px (0.55%) changed

Before	After	Diff

Select / Select Loading

1,461 px (0.68%) changed

Before	After	Diff

Select / Select Multiple

1,205 px (1.19%) changed

Before	After	Diff

Select / Select Complex

1,190 px (1%) changed

Before	After	Diff

Select (Open)

320 px (0%) changed

Before	After	Diff

14 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Dialog / Dialog With Dropdown
• Select / Select Basic
• Select / Select Without Label
• Select / Select Placeholder
• Select / Select Custom Rendering

---

Generated by Kumo Visual Regression