export const title = "Tooltip components"
export const description = "Free and open-source React tooltip components built for modern applications and websites. These tooltips are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/tooltip",
    rac: "https://react-spectrum.adobe.com/react-aria/Tooltip.html"
}

import * as Demos from "@/components/base/tooltip/tooltip.demo.tsx";

<PreviewAndCode title="Tooltip example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tooltip/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this Tooltip component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add tooltip
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/tooltip" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the tooltip components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Tooltip examples

Below are examples and variations of this tooltip component:

### Default

Tooltips are used to display additional information when hovering over an element. This is how our tooltip component looks by default:

<PreviewAndCode title="Default example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tooltip/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

### With arrow

You can add an arrow to the tooltip by passing the `arrow` boolean prop to the `Tooltip` component. This will add an arrow to the tooltip that points to the element being hovered over.

<PreviewAndCode title="With arrow example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.WithArrowDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tooltip/WithArrowDemo" />
    </TabPanel>
</PreviewAndCode>

### With supporting text

In situations where you want to provide more context for the tooltip, you can pass a description to the `Tooltip` component. This will display the description below the tooltip title.

<PreviewAndCode title="With supporting text example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.WithSupportingTextDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tooltip/WithSupportingTextDemo" />
    </TabPanel>
</PreviewAndCode>

### Placements

Since our tooltip component is built with React Aria, it supports all the placements that React Aria supports. You can set the placement using the `placement` prop on the `Tooltip` component. To see the full list of placements, check out the tooltip props in the [React Aria documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html#tooltip-1).

<PreviewAndCode title="Placements example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.TooltipDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="tooltip/TooltipDemo" />
    </TabPanel>
</PreviewAndCode>