Tooltip
Contextual helper text on hover or focus.
Import/Installation
import { Button, Tooltip } from "@lottiefiles/creator-plugins-ui";Preview
Usage
<Tooltip content="This action applies your changes.">
<Button variant="outline" size="sm">
Hover me
</Button>
</Tooltip>Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| content | React.ReactNode | — | Yes | The content to display in the tooltip. |
| children | React.ReactElement | — | Yes | The trigger element that shows the tooltip on hover. |
| side | "top" | "right" | "bottom" | "left" | "top" | No | The preferred side of the trigger to render against when open. |
| sideOffset | number | 4 | No | The distance in pixels from the trigger. |
| delayDuration | number | 300 | No | The duration from when the mouse enters the trigger until the tooltip opens. |
| defaultOpen | boolean | false | No | Whether the tooltip should be open by default. |
| open | boolean | — | No | The controlled open state of the tooltip. |
| onOpenChange | (open: boolean) => void | — | No | Event handler called when the open state changes. |
Built on Base UI Tooltip. See their docs for primitive-level details. For full control, the library also exports TooltipProvider, TooltipRoot, TooltipTrigger, and TooltipContent.
Last updated: August 5, 2026 at 11:47 AMEdit this page