# Tooltip

> A short label shown on hover and focus.

## Examples

### Basic

```vue
<template>
  <div class="demo-row">
    <UiTooltip text="Bold" v-slot="{ attrs }">
      <UiIconButton label="Bold" variant="secondary" v-bind="attrs"
        ><Icon name="bold"
      /></UiIconButton>
    </UiTooltip>
    <UiTooltip text="Italic" v-slot="{ attrs }">
      <UiIconButton label="Italic" variant="secondary" v-bind="attrs">
        <Icon name="italic" />
      </UiIconButton>
    </UiTooltip>
    <UiTooltip text="Underline" v-slot="{ attrs }">
      <UiIconButton label="Underline" variant="secondary" v-bind="attrs">
        <Icon name="underline" />
      </UiIconButton>
    </UiTooltip>
  </div>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | — | Tooltip text. Without it, only the trigger renders. |
| `delay` | `number` | `250` | Milliseconds of hover or focus before it shows. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | `{ attrs: { "aria-describedby"?: string \| undefined; }; }` | The trigger. Bind `attrs` to it so the tooltip describes it. |

## Styling

For an arrow: `data-tooltip-side` is `top` or `bottom` after flipping, and `--ui-tooltip-arrow-x` is the trigger's centre from the tooltip's left edge.

- Parts (`[data-part="…"]`): `tooltip-root`, `tooltip`
- State attributes: `data-tooltip-side`

## Keyboard

| Keys     | Action                                                       |
| -------- | ------------------------------------------------------------ |
| `Escape` | Hide without moving focus, leaving a surrounding dialog open |

## Accessibility

- Bind the slot's `attrs` to the trigger, which it then describes.