Tooltip
OverlaysContextual information on hover or focus. Use LazyTooltip for performance in lists. Includes TooltipProvider for delay configuration.
import { Tooltip } from "@cohere-ai/waypoint-ui/tooltip";Live Preview
Props
| Name | Type | Default | Description |
|---|---|---|---|
delayDuration (TooltipProvider) | number | 0 | Delay before tooltip shows (ms) |
variant (TooltipContent) | 'default' | 'outline' | 'primary' | 'default' | Visual style |
withArrow (TooltipContent) | boolean | true | Show pointing arrow |
sideOffset (TooltipContent) | number | 6 | Distance from trigger |
content (LazyTooltip) | ReactNode | - | Tooltip content |
side (LazyTooltip) | 'top' | 'right' | 'bottom' | 'left' | - | Preferred side |
align (LazyTooltip) | 'start' | 'center' | 'end' | - | Alignment |
Examples
Basic Tooltip
Tooltip on a settings icon button
1 import { Tooltip, TooltipTrigger, TooltipContent } from '@cohere-ai/waypoint-ui/tooltip'; 2 3 <Tooltip> 4 <TooltipTrigger asChild> 5 <Button variant="ghost" size="icon"><SettingsIcon /></Button> 6 </TooltipTrigger> 7 <TooltipContent>Settings</TooltipContent> 8 </Tooltip>
LazyTooltip
Performance-optimized tooltip for lists and grids — defers mounting until first hover
1 import { LazyTooltip } from '@cohere-ai/waypoint-ui/tooltip'; 2 3 <LazyTooltip content="Delete this item"> 4 <Button variant="ghost" size="icon"><TrashIcon /></Button> 5 </LazyTooltip>
Additional Resources
Design Guidelines
Do
Prefer LazyTooltip over Tooltip when rendering many tooltips in lists or grids.
Don't
Put interactive content (buttons, links) inside tooltip content.
Found an Issue?
If you've encountered a bug or have feedback about the Tooltip component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.