Compact and detailed labels on hover and focus.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/tooltipPackage import
import { Tooltip, TooltipContent, TooltipTrigger } from "@default-file/ui/components/df-tooltip"Pill label for short, single-line hints.
Square-ish panel that stays on one line.
Square-ish panel that wraps copy across multiple lines.
Hide the pointer with arrow={false}.
Corner placements (top left, top right, bottom left, bottom right) plus centred top, right, bottom, and left.
Compact or detailed labels on hover and focus. Compose Tooltip, TooltipTrigger, and TooltipContent.
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "compact" | "detailed" | "compact" | Content density and typography. |
| open | boolean | — | Controlled open state. |
| defaultOpen | boolean | — | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | — | Called when open state changes. |
| delayDuration | number | 200 | Hover delay in milliseconds before showing. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| render | ReactElement | — | Host element to attach tooltip behavior to. |
| children | ReactNode | — | Trigger content when not using render. |
| …button attributes | ButtonHTMLAttributes | — | Applied when rendering the default button host. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "top" | Preferred placement side. |
| align | "start" | "center" | "end" | "center" | Alignment along the side. |
| sideOffset | number | 14 | Gap between trigger and content. |
| alignOffset | number | 0 | Shift along the alignment axis. |
| wrap | boolean | — | Detailed only: wrap text within max width. |
| arrow | boolean | true | Show the pointing arrow. |
| children | ReactNode | — | Tooltip label or detailed body. |