---

## Tooltip
Contextual overlay that displays brief, supplementary text on hover or focus.
Built on the library's own positioning engine for precise placement and accessibility support.
Renders as phrasing content — trigger, panel and arrow are all `<span>` — so it is valid inside a
paragraph, the position it is meant for. `Popover` needs its `inline` prop for that; `Tooltip`
needs no opt-in, because `label` is a string and cannot carry block content. Two caveats: the
trigger children are yours, and a `<div>` there closes the paragraph again; and the trigger
wrapper is `inline-flex`, so it is atomic — a multi-word trigger will not break across lines.

**Import:** `import { Tooltip } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Tooltip label="Save your changes">
  <Button>Save</Button>
</Tooltip>
```

```svelte
<Tooltip label="Copy to clipboard" placement="right" arrow showDelay={100}>
  <Button variant="ghost" size="sm" onclick={handleCopy}>Copy</Button>
</Tooltip>
```

```svelte
<script lang="ts">
let copied = $state(false);
async function copy() {
await navigator.clipboard.writeText(text);
copied = true;
setTimeout(() => (copied = false), 1500);
}
</script>

<Tooltip label="Copied!" bind:open={copied}>
<Button onclick={copy}>Copy</Button>
</Tooltip>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: neutral)
- size: lg, md, sm (default: md)
- open: false, true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| children | `Snippet` | yes |  | The trigger element(s) that activate the tooltip. |
| label | `string` | yes |  | Text displayed inside the tooltip bubble. |
| ...HTMLAttributes<HTMLSpanElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ...TooltipVariants | `VariantProps` | no |  | Styling variants from TooltipVariants |
| arrow | `boolean` | no | true | Whether to show a directional arrow pointing at the trigger. |
| class | `string` | no |  | Additional CSS class for the tooltip panel.  One class to avoid: anything that sets `display`. The panel is a `<span>` that CSS blockifies through its `position: fixed`, and an author-level `display` also beats the UA rule `[popover]:not(:popover-open) { display: none }` — the closed tooltip then keeps a laid-out box, invisible but present in the a11y tree and to find-in-page. The same applies to `slotClasses.base`, a `preset`, and `BlocksProvider` overrides. A unit test holds this component's own variants to the rule; nothing checks what you pass in. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| disabled | `boolean` | no | false | Prevent the tooltip from appearing regardless of hover/focus. |
| hideDelay | `number` | no | 100 | Milliseconds before the tooltip disappears after leaving the trigger. |
| onOpenChange | `(open: boolean) => void` | no |  | Fires when the tooltip opens or closes from user interaction (hover in/out, focus/blur, Escape). Receives the new open state. Not called when the consumer writes `bind:open` directly. |
| open | `boolean` | no | false | Controls tooltip visibility. Supports `bind:open` for programmatic display (e.g. a transient "Copied!" confirmation). Hover/focus keep driving the state in parallel — the delays apply only to those interaction paths, a `bind:open` write takes effect immediately. |
| placement | `Placement` | no | 'top' | Where the tooltip appears relative to the trigger. Auto-flips when clipped. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Tooltip: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| showDelay | `number` | no | 200 | Milliseconds before the tooltip appears after hover/focus. Prevents accidental activation. |
| slotClasses | `Partial<Record<TooltipSlots, string>>` | no |  | Per-slot class overrides merged with (or replacing, when unstyled) tv styles. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| transitionDuration | `number` | no |  | Override the fade duration in milliseconds. Distinct from `showDelay` / `hideDelay`, which time *when* the tooltip appears — this is how fast the opacity fade itself runs. Defaults to the tooltip token `--blocks-tooltip-duration` (fast, 150ms). Respects `prefers-reduced-motion`. |
| transitionEasing | `string` | no |  | Override the fade easing as a CSS `<easing-function>` (e.g. `'linear'`, `'ease-out'`, `'cubic-bezier(0.4,0,0.2,1)'`). Defaults to the tooltip token `--blocks-tooltip-easing`. A CSS string, not a JS easing fn, because the tooltip fade is a pure CSS transition. |
| unstyled | `boolean` | no |  | Remove default tv classes; only consumer classes apply. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | neutral | Controls the color theme and semantic meaning of the Tooltip. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the Tooltip. Affects the component's physical footprint. Available options: lg, md, sm. |

Inherited from:
- TooltipVariants (external)
- Omit<HTMLAttributes<HTMLSpanElement>, 'children'> (omit-pattern)

### Types
```ts
type Placement = Side | `${Side}-${Alignment}`
```

```ts
type Side = 'top' | 'right' | 'bottom' | 'left'
```

```ts
type Alignment = 'start' | 'end'
```

### Slots (slotClasses keys)
`base`, `arrow`