Tooltip
overlaysA popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Preview
Installation
npm install @launchapp/design-systemImport
import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from "@launchapp/design-system";Examples
Basic Tooltip
<TooltipProvider> <TooltipRoot> <TooltipTrigger asChild> <Button variant="outline">Hover me</Button> </TooltipTrigger> <TooltipContent> <p>Add to library</p> </TooltipContent> </TooltipRoot></TooltipProvider>Props
| Prop | Type | Default | Description |
|---|---|---|---|
delayDuration | number | 400 | Time in ms from hover to open (on TooltipRoot). |
side | "top" | "right" | "bottom" | "left" | "top" | Preferred side of the trigger (on TooltipContent). |
sideOffset | number | 4 | Distance from trigger in px (on TooltipContent). |