Tooltip

Hover tooltips via Svelte 5 attachments. Automatically integrated with Button's title prop.

import { tooltip } from 'phoundry-ui';

Button with Title

Show code

<Button title="Save" icon={PhiIcons.check} iconOnly />
<Button title="Search" icon={PhiIcons.search} iconOnly />

Tooltip Attachment

String shorthand Options object

Show code

<span {@attach tooltip('Hover text')}>Hover me</span>
<span {@attach tooltip({ content: 'Hello', disabled: false })}>Options object</span>

Snippet content

Hover for snippet

Show code

{#snippet richTooltip()}
  <span class="text-xs">Rich <strong class="text-txt-primary">snippet</strong> body</span>
{/snippet}

<span {@attach tooltip({ content: richTooltip })}>Hover me</span>

tooltip() attachment

Prop	Type	Default	Description
tooltip(...) required	TooltipOptions \| string \| Snippet	—	Pass a string for shorthand (`tooltip("Hi")` expands to `{ content: "Hi" }`). Otherwise use `{ content, disabled? }`.
content	string \| Snippet	—	Tooltip body — plain text or a snippet with richer markup.
disabled	boolean	false	Skip attaching listeners — useful while loading.

Usage tips

Initialize overlays once via setupOverlays() (or wire providers manually) and mount TooltipOverlay beside other overlays — the attachment talks to getTooltipManager().
Button with a title prop automatically uses the tooltip system. Set noTooltip to use the native browser title instead.
Tooltips hide on pointer leave, immediately on click, and on window scroll (capture phase).
Prefer concise strings in tooltips; move long help text into dialogs or docs — hover delays make long copy hard to read.