# Tooltip

> Source: https://design.nanatec.co.ke/components/tooltip/
> A small contextual label that appears on hover or keyboard focus. Wrap the trigger in the default slot and pass the text via the `content` attribute (or the `content` slot for rich markup). Shows on hover **and** focus for accessibility, dismisses on `Escape`, and flips on the main axis when it would overflow the viewport.

A small contextual label that appears on hover or keyboard focus. Wrap the trigger in the default slot and pass the text via the `content` attribute (or the `content` slot for rich markup). Shows on hover **and** focus for accessibility, dismisses on `Escape`, and flips on the main axis when it would overflow the viewport.

## Preview

```html
<nana-tooltip content="Saves your changes">
  <nana-button>Hover me</nana-button>
</nana-tooltip>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/tooltip";
```

## Basic usage

```html
<nana-tooltip content="Saves your changes">
  <nana-button>Hover me</nana-button>
</nana-tooltip>
```

## Placements

```html
<nana-tooltip content="Top" placement="top" arrow><nana-button variant="secondary" size="sm">Top</nana-button></nana-tooltip>
<nana-tooltip content="Right" placement="right" arrow><nana-button variant="secondary" size="sm">Right</nana-button></nana-tooltip>
<nana-tooltip content="Bottom" placement="bottom" arrow><nana-button variant="secondary" size="sm">Bottom</nana-button></nana-tooltip>
<nana-tooltip content="Left" placement="left" arrow><nana-button variant="secondary" size="sm">Left</nana-button></nana-tooltip>
```

## Variants

```html
<nana-tooltip content="Dark" variant="dark" arrow><nana-button variant="secondary" size="sm">Dark</nana-button></nana-tooltip>
<nana-tooltip content="Light" variant="light" arrow><nana-button variant="secondary" size="sm">Light</nana-button></nana-tooltip>
<nana-tooltip content="Success" variant="success" arrow><nana-button variant="secondary" size="sm">Success</nana-button></nana-tooltip>
<nana-tooltip content="Danger" variant="danger" arrow><nana-button variant="secondary" size="sm">Danger</nana-button></nana-tooltip>
<nana-tooltip content="Info" variant="info" arrow><nana-button variant="secondary" size="sm">Info</nana-button></nana-tooltip>
<nana-tooltip content="Warning" variant="warning" arrow><nana-button variant="secondary" size="sm">Warning</nana-button></nana-tooltip>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-show` | `CustomEvent` | Fired when the tooltip opens |
| `nana-hide` | `CustomEvent` | Fired when the tooltip closes |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The trigger element the tooltip describes |
| `content` | Rich tooltip content (overrides the `content` attribute) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-tooltip-bg` | — | Bubble background |
| `--nana-tooltip-color` | — | Bubble text colour |
| `--nana-tooltip-max-width` | — | Max bubble width before wrapping |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The positioning container |
| `body` | The tooltip bubble |
| `arrow` | The pointing arrow |
| `trigger` | The trigger wrapper |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/card/">Card</a></li>
  <li><a href="/components/details/">Details</a></li>
  <li><a href="/components/divider/">Divider</a></li>
  <li><a href="/components/dialog/">Dialog</a></li>
  <li><a href="/components/drawer/">Drawer</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-tooltip--docs