# Tooltip

> A small floating label identifying an otherwise unlabeled control or adding a supplementary hint, riding the same `popover`-attributed host and CSS anchor positioning contract as Popover.

```ts
import { Tooltip } from "@sdxc/ui";
```

Renders the hint through Popover, fixing `popover` to `"hint"` and
`role` to `"tooltip"`. The host stays present in the DOM, entering on
`:popover-open`, `:focus-visible`, or the trigger's hover, animated via `@starting-style`.

## Examples

```tsx
<button popovertarget="save-tooltip" aria-describedby="save-tooltip">
	{t("actions.save")}
</button>
<Tooltip id="save-tooltip">{t("actions.saveDescription")}</Tooltip>
```

```tsx
<a href="/settings" popovertarget="settings-tooltip" aria-describedby="settings-tooltip">
	<GearIcon aria-hidden />
</a>
<Tooltip id="settings-tooltip" placement="right" showArrow={false}>
	{t("nav.settings")}
</Tooltip>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `showArrow?` | `boolean` | Whether to render a pointer-arrow child pointing back at the trigger, filled to match this host's own solid background so the two read as one continuous shape. Defaults to DEFAULT_SHOW_ARROW. |

Also accepts everything in `Omit<Popover.Props, "popover" | "role">`.