Use Tooltip to show contextual help on hover or focus.
import { Tooltip, TooltipTrigger, TooltipContent } from '@tile-ui/react';
export default function TooltipDemo() {
return (
<Tooltip>
<TooltipTrigger className="component-preview__action">Hover me</TooltipTrigger>
Registry install
pnpm dlx shadcn@latest add @tile-ui/tooltip
Package usage
import { Tooltip, TooltipTrigger, TooltipContent } from '@tile-ui/react';
<Tooltip>
<TooltipTrigger>Hover me</TooltipTrigger>
<TooltipContent>Help text.</TooltipContent>
</Tooltip>
Highlights
- Provider with delay
- Trigger and content
- Side and offset
Registry dependencies
| Item | Purpose |
|---|
tooltip | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
| Prop | Type | Default |
|---|
delayDuration | number | — |
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
| Prop | Type | Default |
|---|
asChild | boolean | — |
TooltipContent
| Prop | Type | Default |
|---|
side | 'top' | 'right' | 'bottom' | 'left' | — |
sideOffset | number | — |