This component implements the Material Design 3 tooltip with proper accessibility support. It provides contextual information in a floating panel when users hover over or focus on an element. Features: - Plain and rich tooltip variants - Customizable delay duration - Automatic positioning with arrow - Smooth animations for entry/exit - Proper ARIA attributes for accessibility - Keyboard navigation support - Rich content support
Qwik M3 Tooltip
Interactive Demo
Tooltip Variants
Default plain tooltip
Feature nameDetailed description of the feature
Tooltip Delays
Appears immediately
Appears after 500ms
Appears after 1 second
Rich Content Examples
Helpful information
Feature nameDetailed description of the feature that spans multiple lines to demonstrate rich content capabilities
Common Use Cases
Settings
Add to favorites
Share
Not available
// Plain tooltip (default)
<Tooltip.Root>
<Tooltip.Trigger type="button">Hover me</Tooltip.Trigger>
<Tooltip.Panel>
This is a plain tooltip
</Tooltip.Panel>
</Tooltip.Root>
// Rich tooltip
<Tooltip.Root>
<Tooltip.Trigger type="button">Rich tooltip</Tooltip.Trigger>
<Tooltip.Panel variant="rich">
<div class="flex flex-col gap-1">
<span class="font-medium">Feature name</span>
<span>Detailed description of the feature</span>
</div>
</Tooltip.Panel>
</Tooltip.Root>