TooltipButton
Form ControlsStable
Button with an integrated tooltip. Uses LazyTooltip by default. Renders as a plain Button when no tooltip prop is provided.
Quick Import
import { TooltipButton } from "@cohere-ai/waypoint-ui/tooltip-button";Live Preview
Loading TooltipButton...
Props
| Name | Type | Default | Description |
|---|---|---|---|
tooltip | ReactNode | - | Tooltip content |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | Tooltip preferred side |
align | 'start' | 'center' | 'end' | 'center' | Tooltip alignment |
delayDuration | number | - | Tooltip show delay |
forceMount | boolean | - | Eagerly mounts tooltip (overrides lazy behavior) |
asChild | boolean | - | Render as child element |
Examples
Icon Button with Tooltip
Delete button with accessible tooltip
1 import { TooltipButton } from '@cohere-ai/waypoint-ui/tooltip-button'; 2 3 <TooltipButton tooltip="Delete this item" variant="ghost" size="icon"> 4 <TrashIcon /> 5 </TooltipButton>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the TooltipButton 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.