# Tooltip

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    Add to library
  </TooltipContent>
</Tooltip>
```
  </div>
  <div slot="react">
```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
            <TooltipContent>
              Add to library
            </TooltipContent>
      </Tooltip>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Hover me</button>
    </TooltipTrigger>
    <TooltipContent> Add to library </TooltipContent>
  </Tooltip>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add tooltip --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add tooltip --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add tooltip --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    Add to library
  </TooltipContent>
</Tooltip>
```
  </div>
  <div slot="react">
```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
            <TooltipContent>
              Add to library
            </TooltipContent>
      </Tooltip>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Hover me</button>
    </TooltipTrigger>
    <TooltipContent> Add to library </TooltipContent>
  </Tooltip>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Composition

Use a trigger and content inside the root:

```text
Tooltip
├── TooltipTrigger
└── TooltipContent
```

## Positioning

Control the position and alignment of the tooltip using the `side` and `align` props.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Top</Button>
  </TooltipTrigger>
  <TooltipContent>
    Tooltip on top
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Right</Button>
  </TooltipTrigger>
  <TooltipContent side="right">
    Tooltip on right
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Bottom</Button>
  </TooltipTrigger>
  <TooltipContent side="bottom">
    Tooltip on bottom
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Left</Button>
  </TooltipTrigger>
  <TooltipContent side="left">
    Tooltip on left
  </TooltipContent>
</Tooltip>
```
  </div>
  <div slot="react">
```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Top</Button>
        </TooltipTrigger>
        <TooltipContent>
          Tooltip on top
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Right</Button>
        </TooltipTrigger>
        <TooltipContent side="right">
          Tooltip on right
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Bottom</Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          Tooltip on bottom
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Left</Button>
        </TooltipTrigger>
        <TooltipContent side="left">
          Tooltip on left
        </TooltipContent>
      </Tooltip>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Top</button>
    </TooltipTrigger>
    <TooltipContent> Tooltip on top </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Right</button>
    </TooltipTrigger>
    <TooltipContent side="right"> Tooltip on right </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Bottom</button>
    </TooltipTrigger>
    <TooltipContent side="bottom"> Tooltip on bottom </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Left</button>
    </TooltipTrigger>
    <TooltipContent side="left"> Tooltip on left </TooltipContent>
  </Tooltip>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Delay

Customize the open and close delay using the `openDelay` and `closeDelay` props.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip openDelay={0} closeDelay={500}>
  <TooltipTrigger>
    <Button variant="outline">No open delay</Button>
  </TooltipTrigger>
  <TooltipContent>
    Instant tooltip
  </TooltipContent>
</Tooltip>

<Tooltip openDelay={1000}>
  <TooltipTrigger>
    <Button variant="outline">Slow open</Button>
  </TooltipTrigger>
  <TooltipContent>
    Opens after 1 second
  </TooltipContent>
</Tooltip>
```
  </div>
  <div slot="react">
```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip openDelay={0} closeDelay={500}>
        <TooltipTrigger>
          <Button variant="outline">No open delay</Button>
        </TooltipTrigger>
        <TooltipContent>
          Instant tooltip
        </TooltipContent>
      </Tooltip>

      <Tooltip openDelay={1000}>
        <TooltipTrigger>
          <Button variant="outline">Slow open</Button>
        </TooltipTrigger>
        <TooltipContent>
          Opens after 1 second
        </TooltipContent>
      </Tooltip>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip :openDelay="0" :closeDelay="500">
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
        No open delay
      </button>
    </TooltipTrigger>
    <TooltipContent> Instant tooltip </TooltipContent>
  </Tooltip>

  <Tooltip :openDelay="1000">
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
        Slow open
      </button>
    </TooltipTrigger>
    <TooltipContent> Opens after 1 second </TooltipContent>
  </Tooltip>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Alignment

Control the alignment of the tooltip relative to its trigger using the `align` prop.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Start</Button>
    </TooltipTrigger>
    <TooltipContent align="start">
      Aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Center</Button>
    </TooltipTrigger>
    <TooltipContent align="center">
      Aligned to center
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">End</Button>
    </TooltipTrigger>
    <TooltipContent align="end">
      Aligned to end
    </TooltipContent>
  </Tooltip>
</div>

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom Start</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="start">
      Bottom aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom End</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="end">
      Bottom aligned to end
    </TooltipContent>
  </Tooltip>
</div>
```
  </div>
  <div slot="react">
```tsx
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <div className="flex justify-between w-[300px]">
        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Start</Button>
          </TooltipTrigger>
          <TooltipContent align="start">
            Aligned to start
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Center</Button>
          </TooltipTrigger>
          <TooltipContent align="center">
            Aligned to center
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">End</Button>
          </TooltipTrigger>
          <TooltipContent align="end">
            Aligned to end
          </TooltipContent>
        </Tooltip>
      </div>

      <div className="flex justify-between w-[300px]">
        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Bottom Start</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom" align="start">
            Bottom aligned to start
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Bottom End</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom" align="end">
            Bottom aligned to end
          </TooltipContent>
        </Tooltip>
      </div>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <div class="flex justify-between w-[300px]">
    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Start</button>
      </TooltipTrigger>
      <TooltipContent align="start"> Aligned to start </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Center</button>
      </TooltipTrigger>
      <TooltipContent align="center"> Aligned to center </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">End</button>
      </TooltipTrigger>
      <TooltipContent align="end"> Aligned to end </TooltipContent>
    </Tooltip>
  </div>

  <div class="flex justify-between w-[300px]">
    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
          Bottom Start
        </button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="start"> Bottom aligned to start </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
          Bottom End
        </button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="end"> Bottom aligned to end </TooltipContent>
    </Tooltip>
  </div>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## API Reference
### Tooltip
- Inherits div attributes.

### TooltipTrigger
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `true` | Primitive override | Merges the component behavior and props into its child element. |
- Inherits span attributes.

### TooltipContent
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `disablePortal` | `boolean` | No | `false` | Wrapper prop | Keeps the public Portal wrapper inline instead of moving it to a target. |
| `portalContainer` | `string` | No | - | Wrapper prop | Sets the CSS selector for the public Portal wrapper target. |
| `positionerClass` | `string` | No | - | Wrapper prop | Adds classes to the generated floating positioner element. |
- Inherits div attributes. Omits `tabIndex` and `tabindex`.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Tooltip Primitive](/docs/primitives/tooltip/)
- Runtime factory: [`createTooltip`](/docs/runtime/#create-tooltip) from `@starwind-ui/runtime/tooltip`

## Changelog

### v2.2.0

- Added `portalContainer` and `disablePortal` to `TooltipContent` for custom portal targets and
inline rendering.

### v2.1.0

- Added `positionerClass` to `TooltipContent` so the floating positioner can be styled directly.
- Moved the default stacking level from the content to the positioner.

### v2.0.2

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### v2.0.0

- Rebuilt Tooltip on Starwind Runtime for hover and focus timing, floating placement, and dismissal.
- See the [Tooltip Primitive](/docs/primitives/tooltip/) for the underlying unstyled anatomy and behavior API.