# Tooltip

**`sonic-tooltip`** shows a short `label` in a bubble when the trigger in the default slot is hovered or receives focus. With no `placement`, the bubble sits on `top`, centered. An empty `label` hides the bubble, like `disabled`.

## Basic example

<sonic-code>
  <template>
    <sonic-tooltip label="Cruising at Mach 2.04">
      <sonic-button variant="outline">Hover me</sonic-button>
    </sonic-tooltip>
  </template>
</sonic-code>

## Placement

`top` · `bottom` · `left` · `right` set the side. Add `-start` or `-end` to align the bubble with an edge of the trigger instead of its center. The bubble is repositioned while open to stay in the viewport.

<sonic-code>
  <template>
    <div class="flex flex-wrap gap-3">
      <sonic-tooltip placement="top" label="top"><sonic-button minWidth="9rem">top</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="top-start" label="top-start"><sonic-button minWidth="9rem">top-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="top-end" label="top-end"><sonic-button minWidth="9rem">top-end</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="bottom" label="bottom"><sonic-button minWidth="9rem">bottom</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="bottom-start" label="bottom-start"><sonic-button minWidth="9rem">bottom-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="bottom-end" label="bottom-end"><sonic-button minWidth="9rem">bottom-end</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="left" label="left"><sonic-button minWidth="9rem">left</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="left-start" label="left-start"><sonic-button minWidth="9rem">left-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="left-end" label="left-end"><sonic-button minWidth="9rem">left-end</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="right" label="right"><sonic-button minWidth="9rem">right</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="right-start" label="right-start"><sonic-button minWidth="9rem">right-start</sonic-button></sonic-tooltip>
      <sonic-tooltip placement="right-end" label="right-end"><sonic-button minWidth="9rem">right-end</sonic-button></sonic-tooltip>
    </div>
  </template>
</sonic-code>

## Multiline label

Line breaks in `label` (a real newline or `&#10;`) are kept. Each line is trimmed and the bubble wraps at `18rem`.

<sonic-code>
  <template>
    <sonic-tooltip label="Gate B12&#10;Boarding at 08:15">
      <sonic-button variant="outline">Multiline label</sonic-button>
    </sonic-tooltip>
  </template>
</sonic-code>

## Focusable

Set `focusable` when the trigger is not focusable itself (text, icon): the host gets `tabindex="0"` so keyboard users can open the tooltip. The bubble uses `popover="hint"`; without Popover API support, the label falls back to a native `title` on one line.

<sonic-code>
  <template>
    <sonic-tooltip
      focusable
      label="The Concorde made its first transatlantic crossing on September 26, 1973"
    >
      <sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon>
      Focus or hover this text
    </sonic-tooltip>
  </template>
</sonic-code>

## Disabled

`disabled` never shows the bubble and sets `tabindex="-1"` on the host.

<sonic-code>
  <template>
    <sonic-tooltip disabled label="Not shown">
      <sonic-button>Tooltip disabled</sonic-button>
    </sonic-tooltip>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `label` | string | Tooltip text; empty or whitespace-only hides the bubble |
| `placement` | `top` (default) · `bottom` · `left` · `right`, each with optional `-start` · `-end` | Side and alignment relative to the trigger |
| `disabled` | boolean | Never show the bubble; sets `tabindex="-1"` on the host |
| `focusable` | boolean | Sets `tabindex="0"` on the host so the tooltip opens on keyboard focus |

| Slot | Description |
|------|-------------|
| *(default)* | Trigger content |