# swc-tooltip

A tooltip component that displays a brief, contextual message near a trigger element.

```js
import '@adobe/spectrum-wc/components/tooltip/index.js';
// <swc-tooltip></swc-tooltip>
```

## Attributes

| Name                | Type                  | Default     | Description                                                                                                                                                             |
| ------------------- | --------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `variant`           | `TooltipVariant`      | `'neutral'` | The semantic variant of the tooltip.                                                                                                                                    |
| `placement`         | `TooltipPlacement`    | `'top'`     | Preferred placement of the tooltip relative to its trigger.                                                                                                             |
| `open`              | `boolean`             | `false`     | Whether the tooltip is visible.                                                                                                                                         |
| `for`               | `string \| undefined` | -           | The `id` of the trigger element in the same document tree root.                                                                                                         |
| `delay`             | `number`              | `1500`      | Warm-up delay in milliseconds before the tooltip opens on pointer hover. Set to `0` to open immediately. Keyboard focus always opens immediately.                       |
| `disabled`          | `boolean`             | `false`     | When set, the tooltip does not respond to hover or focus events and cannot be opened.                                                                                   |
| `manual`            | `boolean`             | `false`     | Suppresses automatic hover and focus wiring. The consumer manages visibility via the `open` property or the popover API.                                                |
| `offset`            | `number`              | `4`         | Pixel gap along the placement axis between the trigger and the tooltip bubble.                                                                                          |
| `cross-offset`      | `number`              | `0`         | Slide along the trigger edge perpendicular to the placement direction, in pixels.                                                                                       |
| `container-padding` | `number`              | `12`        | Minimum inset from the viewport edge, in pixels, for collision detection.                                                                                               |
| `should-flip`       | `boolean`             | `true`      | Whether the tooltip may reposition to the opposite side when the requested placement does not fit within the viewport.                                                  |
| `labeling`          | `boolean`             | `false`     | When set, the tooltip acts as the trigger's accessible name rather than its description. Use for icon-only triggers where the tooltip text is the sole accessible name. |

## Slots

| Name        | Description                          |
| ----------- | ------------------------------------ |
| `(default)` | Text label displayed in the tooltip. |

## Events

| Name              | Description                                                                   |
| ----------------- | ----------------------------------------------------------------------------- |
| `swc-open`        | Dispatched when the tooltip begins to open, before the transition plays.      |
| `swc-close`       | Dispatched when the tooltip begins to close, before the transition plays.     |
| `swc-after-open`  | Dispatched after the tooltip finishes opening, once the transition completes. |
| `swc-after-close` | Dispatched after the tooltip finishes closing, once the transition completes. |
| `undefined`       |                                                                               |

## CSS Custom Properties

| Name                             | Description                                                                              |
| -------------------------------- | ---------------------------------------------------------------------------------------- |
| `--swc-tooltip-background-color` | Background color of the tooltip bubble. Overrides the variant-specific background color. |