# Tooltip

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Tooltip> <TooltipTrigger asChild> <Button variant="outline">Hover</Button> </TooltipTrigger> <TooltipContent> <p>Add to library</p> </TooltipContent> </Tooltip>
</div>

```astro
---
---

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>
```

## Installation

<DocsTabs syncKey="pkg">
  <DocsTabItem label="bun">
  ```bash
  bunx bejamas add tooltip
  ```
  </DocsTabItem>
  <DocsTabItem label="npm">
  ```bash
  npx bejamas add tooltip
  ```
  </DocsTabItem>
  <DocsTabItem label="pnpm">
  ```bash
  pnpm dlx bejamas add tooltip
  ```
  </DocsTabItem>
  <DocsTabItem label="yarn">
  ```bash
  yarn dlx bejamas add tooltip
  ```
  </DocsTabItem>
</DocsTabs>

## Usage

```astro nocollapse
---
---

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>
```

## Props

| Prop | Type | Default |
|---|---|---|
| <code>class</code> | `string` | `""` |
| <code>delay</code> | `number` | `300` |
| <code>skipDelayDuration</code> | `number` | `300` |

## Examples

### With delay

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Tooltip delay={1000}> <TooltipTrigger asChild> <Button variant="outline">Hover with delay</Button> </TooltipTrigger> <TooltipContent> <p>This tooltip appears after 1000ms</p> </TooltipContent> </Tooltip>
</div>

```astro
---
---

<Tooltip delay={1000}>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover with delay</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>This tooltip appears after 1000ms</p>
  </TooltipContent>
</Tooltip>
```

### Skip delay on subsequent tooltips

When a tooltip is shown, hovering over other tooltip triggers will show their tooltips immediately without delay. Try hovering over the first button, then quickly move to the others.

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex gap-2"> <Tooltip delay={500}> <TooltipTrigger asChild> <Button variant="outline">Bold</Button> </TooltipTrigger> <TooltipContent> <p>Bold (Ctrl+B)</p> </TooltipContent> </Tooltip> <Tooltip delay={500}> <TooltipTrigger asChild> <Button variant="outline">Italic</Button> </TooltipTrigger> <TooltipContent> <p>Italic (Ctrl+I)</p> </TooltipContent> </Tooltip> <Tooltip delay={500}> <TooltipTrigger asChild> <Button variant="outline">Underline</Button> </TooltipTrigger> <TooltipContent> <p>Underline (Ctrl+U)</p> </TooltipContent> </Tooltip> </div>
</div>

```astro
---
---

<div class="flex gap-2">
  <Tooltip delay={500}>
    <TooltipTrigger asChild>
      <Button variant="outline">Bold</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Bold (Ctrl+B)</p>
    </TooltipContent>
  </Tooltip>
  <Tooltip delay={500}>
    <TooltipTrigger asChild>
      <Button variant="outline">Italic</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Italic (Ctrl+I)</p>
    </TooltipContent>
  </Tooltip>
  <Tooltip delay={500}>
    <TooltipTrigger asChild>
      <Button variant="outline">Underline</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Underline (Ctrl+U)</p>
    </TooltipContent>
  </Tooltip>
</div>
```

### Different sides

Use the `side` prop to control which side the tooltip appears on.

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="grid gap-4 py-8"> <div class="flex gap-4 items-center justify-center"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Left</Button> </TooltipTrigger> <TooltipContent side="left"> <p>Tooltip on left</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Top</Button> </TooltipTrigger> <TooltipContent side="top"> <p>Tooltip on top</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Bottom</Button> </TooltipTrigger> <TooltipContent side="bottom"> <p>Tooltip on bottom</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Right</Button> </TooltipTrigger> <TooltipContent side="right"> <p>Tooltip on right</p> </TooltipContent> </Tooltip> </div> <div class="flex gap-4 items-center justify-center"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Inline Start</Button> </TooltipTrigger> <TooltipContent side="inline-start"> <p>Tooltip on inline start</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Inline End</Button> </TooltipTrigger> <TooltipContent side="inline-end"> <p>Tooltip on inline end</p> </TooltipContent> </Tooltip> </div> </div>
</div>

```astro
---
---

<div class="grid gap-4 py-8">
  <div class="flex gap-4 items-center justify-center">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Left</Button>
      </TooltipTrigger>
      <TooltipContent side="left">
        <p>Tooltip on left</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Top</Button>
      </TooltipTrigger>
      <TooltipContent side="top">
        <p>Tooltip on top</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Bottom</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom">
        <p>Tooltip on bottom</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Right</Button>
      </TooltipTrigger>
      <TooltipContent side="right">
        <p>Tooltip on right</p>
      </TooltipContent>
    </Tooltip>
  </div>
  <div class="flex gap-4 items-center justify-center">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Inline Start</Button>
      </TooltipTrigger>
      <TooltipContent side="inline-start">
        <p>Tooltip on inline start</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Inline End</Button>
      </TooltipTrigger>
      <TooltipContent side="inline-end">
        <p>Tooltip on inline end</p>
      </TooltipContent>
    </Tooltip>
  </div>
</div>
```

### Alignment options

Use the `align` prop to control how the tooltip aligns relative to the trigger.

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex flex-col gap-4 items-center py-8"> <div class="flex gap-4"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Top Start</Button> </TooltipTrigger> <TooltipContent side="top" align="start"> <p>Aligned to start</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Top Center</Button> </TooltipTrigger> <TooltipContent side="top" align="center"> <p>Aligned to center</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Top End</Button> </TooltipTrigger> <TooltipContent side="top" align="end"> <p>Aligned to end</p> </TooltipContent> </Tooltip> </div> <div class="flex gap-4"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Bottom Start</Button> </TooltipTrigger> <TooltipContent side="bottom" align="start"> <p>Aligned to start</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Bottom Center</Button> </TooltipTrigger> <TooltipContent side="bottom" align="center"> <p>Aligned to center</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Bottom End</Button> </TooltipTrigger> <TooltipContent side="bottom" align="end"> <p>Aligned to end</p> </TooltipContent> </Tooltip> </div> </div>
</div>

```astro
---
---

<div class="flex flex-col gap-4 items-center py-8">
  <div class="flex gap-4">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Top Start</Button>
      </TooltipTrigger>
      <TooltipContent side="top" align="start">
        <p>Aligned to start</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Top Center</Button>
      </TooltipTrigger>
      <TooltipContent side="top" align="center">
        <p>Aligned to center</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Top End</Button>
      </TooltipTrigger>
      <TooltipContent side="top" align="end">
        <p>Aligned to end</p>
      </TooltipContent>
    </Tooltip>
  </div>
  <div class="flex gap-4">
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Bottom Start</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="start">
        <p>Aligned to start</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Bottom Center</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="center">
        <p>Aligned to center</p>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Bottom End</Button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="end">
        <p>Aligned to end</p>
      </TooltipContent>
    </Tooltip>
  </div>
</div>
```

### Positioning Options

Use `TooltipContent` props to configure placement:

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<div class="flex gap-3"> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Offset</Button> </TooltipTrigger> <TooltipContent sideOffset={8}> <p>More distance from trigger</p> </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger asChild> <Button variant="outline">Align offset</Button> </TooltipTrigger> <TooltipContent side="bottom" align="start" alignOffset={12}> <p>Shifted on alignment axis</p> </TooltipContent> </Tooltip> </div>
</div>

```astro
---
---

<div class="flex gap-3">
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Offset</Button>
    </TooltipTrigger>
    <TooltipContent sideOffset={8}>
      <p>More distance from trigger</p>
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Align offset</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="start" alignOffset={12}>
      <p>Shifted on alignment axis</p>
    </TooltipContent>
  </Tooltip>
</div>
```

### Disabled

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Tooltip> <TooltipTrigger asChild> <Button variant="outline" disabled>Disabled</Button> </TooltipTrigger> <TooltipContent> <p>This feature is currently unavailable</p> </TooltipContent> </Tooltip>
</div>

```astro
---
---

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline" disabled>Disabled</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>This feature is currently unavailable</p>
  </TooltipContent>
</Tooltip>
```

## API Reference

### Events

The tooltip emits custom events that you can listen to:

| Event | Detail | Description |
|-------|--------|-------------|
| `tooltip:change` | `{ open: boolean, trigger: HTMLElement, content: HTMLElement, reason: string }` | Fired when visibility changes |

<div class="not-content sl-bejamas-component-preview flex justify-center px-4 md:px-10 py-12 border border-border rounded-t-lg min-h-72 items-center">
<Tooltip id="my-tooltip"> <TooltipTrigger asChild> <Button variant="outline">Hover me</Button> </TooltipTrigger> <TooltipContent> <p>Tooltip content</p> </TooltipContent> </Tooltip>
</div>

```astro nocollapse
<Tooltip id="my-tooltip">
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Tooltip content</p>
  </TooltipContent>
</Tooltip>
```

```js nocollapse
  const tooltip = document.getElementById('my-tooltip');

  tooltip.addEventListener('tooltip:change', (e) => {
    console.log('Is open:', e.detail.open);
    console.log('Reason:', e.detail.reason);
  });
```

### Programmatic Control

You can control the tooltip programmatically by dispatching a `tooltip:set` event:

```js nocollapse
const tooltip = document.getElementById('my-tooltip');

// Show the tooltip
tooltip.dispatchEvent(new CustomEvent('tooltip:set', {
  detail: { open: true }
}));

// Hide the tooltip
tooltip.dispatchEvent(new CustomEvent('tooltip:set', {
  detail: { open: false }
}));
```

The deprecated `{ value: boolean }` detail shape is still supported temporarily for compatibility, but new code should always use `{ open: boolean }`.

### Data Attributes

The tooltip sets these data attributes that you can use for styling or querying state:

| Attribute | Element | Description |
|-----------|---------|-------------|
| `data-state` | tooltip, tooltip-content | Legacy `"open"` / `"closed"` compatibility shim. Prefer `data-open` / `data-closed`. |
| `data-open` / `data-closed` | tooltip, tooltip-content, tooltip-positioner, tooltip-arrow | Present while open/closed |
| `data-starting-style` / `data-ending-style` | tooltip-content | Present while opening or closing |
| `data-instant` | tooltip, tooltip-content, tooltip-positioner, tooltip-arrow | Interaction reason: `"delay"`, `"focus"`, or `"dismiss"` |
| `data-side` | tooltip-content, tooltip-positioner, tooltip-arrow | Runtime side (`top`, `right`, `bottom`, `left`, `inline-start`, or `inline-end`) after collision handling |
| `data-align` | tooltip-content, tooltip-positioner, tooltip-arrow | Runtime alignment (`start`, `center`, or `end`) |
| `data-side-offset` | tooltip-content | Distance from trigger in pixels (default `4`) |
| `data-align-offset` | tooltip-content | Alignment-axis offset in pixels (default `0`) |