# Tooltip
Contextual helper text on hover or focus.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Button, Tooltip } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/tooltip
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=tooltip--placements&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="480" title="Tooltip component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<Tooltip content="This action applies your changes.">
  <Button variant="outline" size="sm">
    Hover me
  </Button>
</Tooltip>
```

## Props

<PropsTable
  props={[
  {
    name: "content",
    type: "React.ReactNode",
    required: true,
    description: "The content to display in the tooltip.",
  },
  {
    name: "children",
    type: "React.ReactElement",
    required: true,
    description: "The trigger element that shows the tooltip on hover.",
  },
  {
    name: "side",
    type: '"top" | "right" | "bottom" | "left"',
    default: '"top"',
    description: "The preferred side of the trigger to render against when open.",
  },
  {
    name: "sideOffset",
    type: "number",
    default: "4",
    description: "The distance in pixels from the trigger.",
  },
  {
    name: "delayDuration",
    type: "number",
    default: "300",
    description: "The duration from when the mouse enters the trigger until the tooltip opens.",
  },
  {
    name: "defaultOpen",
    type: "boolean",
    default: "false",
    description: "Whether the tooltip should be open by default.",
  },
  {
    name: "open",
    type: "boolean",
    description: "The controlled open state of the tooltip.",
  },
  {
    name: "onOpenChange",
    type: "(open: boolean) => void",
    description: "Event handler called when the open state changes.",
  },
]}
/>

Built on [Base UI Tooltip](https://base-ui.com/react/components/tooltip). See their docs for primitive-level details. For full control, the library also exports `TooltipProvider`, `TooltipRoot`, `TooltipTrigger`, and `TooltipContent`.