Tooltip

Hover/focus hint for a trigger.

A lightweight tooltip that wraps any trigger and shows a short hint on hover or focus. It follows the WAI-ARIA tooltip pattern: the popup has `role="tooltip"`, the trigger wrapper gets `aria-describedby` only while open, and it dismisses on Escape. Position it with `placement` (top/bottom/left/right); the transition respects `prefers-reduced-motion`.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Tooltip, Button } from 'dssoca';
</script>

<Tooltip text="Restart the service">
  <Button>Restart</Button>
</Tooltip>

<Tooltip text="Opens in a new tab" placement="bottom">
  <button>Docs</button>
</Tooltip>

Show on `mouseenter`/`focusin`, hide on `mouseleave`/`focusout` and Escape. The tooltip element stays in the DOM but is `hidden` (and never announced) while closed; `aria-describedby` is wired only while open.

Props

Prop	Type	Default	Description
`text`	`string`	—	Required. The tooltip text / accessible description.
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Side the tooltip attaches to relative to the trigger.
`children`	`Snippet`	—	Required. The trigger content, wrapped in an inline-block container.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.