# Tooltip

```mdx
<button class="btn" data-variant="outline" data-tooltip="Add to library">Hover</button>
```

## Usage

<Steps>
  <Step title="Include CSS">

Import Tailwind and one full Basecoat style bundle.

```css
@import "tailwindcss";
@import "basecoat-css/vega.css";
```

Or import only the base CSS, Tooltip component CSS, and one style pack.

```css
@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/tooltip.css";
@import "basecoat-css/styles/vega.css";
```

Using CDN or bundler imports? See the [Installation page](/installation).

  </Step>
  <Step title="Add your tooltip HTML">

Add `data-tooltip` to the trigger element. Use `data-side` and `data-align` to change the position:

- `data-tooltip`: Tooltip text.
- `data-side` `Optional`: `top`, `bottom`, `left`, `right`, `inline-start`, or `inline-end`. Defaults to `top`.
- `data-align` `Optional`: `start`, `center`, or `end`. Defaults to `center`.

Basecoat tooltips are CSS-only and text-only. This intentionally differs from shadcn/ui's composed tooltip content, which can render arbitrary markup and uses a portal.

```html
<button class="btn" data-variant="outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>
```

  </Step>
</Steps>

## Examples

### Default

```mdx
<button class="btn" data-variant="outline" data-tooltip="Default tooltip">Default</button>
```

### Sides

```mdx
<div class="flex flex-wrap gap-2">
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-start">Inline Start</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="top">Top</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="bottom">Bottom</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-end">Inline End</button>
</div>
```

### Icon button

```mdx
<button class="btn" data-variant="ghost" data-size="icon" data-tooltip="Additional information" aria-label="Info"><svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg></button>
```

### Disabled button

```mdx
<span class="inline-block" data-tooltip="This feature is currently unavailable"> <button class="btn" data-variant="outline" disabled>Disabled</button></span>
```

### Link

```mdx
<a href="#" class="text-primary text-sm underline-offset-4 hover:underline" data-tooltip="Click to read the documentation">Learn more</a>
```

### RTL

```mdx
<div dir="rtl" class="flex gap-2">
  <button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-start">Inline Start</button>
  <button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-end">Inline End</button>
</div>
```