Tooltips

Themed tooltips via the use:tooltip action, positioned by the shared anchored engine (flips vs the viewport, top layer). No global handler. It reads — and suppresses — the native title, and backstops aria-label for elements with no accessible name.

Basics

hover this text

import { Button, tooltip } from 'svelte-ui';
import IconHome from '~icons/mdi/home';
import IconTrash from '~icons/mdi/delete';

<!-- Built into Button — just pass title (the native tooltip is replaced) -->
<Button title="Home" variant="primary">{#snippet icon()}<IconHome />{/snippet}</Button>
<Button text="Delete" title="Permanently delete" variant="danger">
  {#snippet icon()}<IconTrash />{/snippet}
</Button>

<!-- The action on any element: pass text, or let it read the native title -->
<button use:tooltip={{ text: 'Plain element + use:tooltip' }}>Plain button</button>
<span use:tooltip={{ text: 'Works on any element' }}>hover this text</span>

Variants

variant colours the bubble + arrow — hover a button.

<button use:tooltip={{ text: '…', variant: 'neutral' }}>…</button>
<button use:tooltip={{ text: '…', variant: 'primary' }}>…</button>
<button use:tooltip={{ text: '…', variant: 'secondary' }}>…</button>
<button use:tooltip={{ text: '…', variant: 'success' }}>…</button>
<button use:tooltip={{ text: '…', variant: 'info' }}>…</button>
<button use:tooltip={{ text: '…', variant: 'warning' }}>…</button>
<button use:tooltip={{ text: '…', variant: 'danger' }}>…</button>
<button use:tooltip={{ text: '…', variant: 'ghost' }}>…</button>

Sizes

size sets the bubble padding + text.

<button use:tooltip={{ text: '…', size: 'sm' }}>…</button>
<button use:tooltip={{ text: '…', size: 'md' }}>…</button>
<button use:tooltip={{ text: '…', size: 'lg' }}>…</button>

Placement

Preferred side (flips to the opposite if it won't fit) and cross-axis align. Default is top / center.

<button use:tooltip={{ text: 'Top (default)', side: 'top' }}>Top</button>
<button use:tooltip={{ text: 'Right', side: 'right' }}>Right</button>
<button use:tooltip={{ text: 'Bottom', side: 'bottom' }}>Bottom</button>
<button use:tooltip={{ text: 'Left', side: 'left' }}>Left</button>
<button use:tooltip={{ text: 'Bottom, aligned to the start edge', side: 'bottom', align: 'start' }}>Align start</button>

Options

<button use:tooltip={{ text: 'Shows instantly', delay: 0 }}>No delay</button>
<button use:tooltip={{ text: 'A longer tooltip that wraps onto multiple lines once it passes the max width.' }}>Long text</button>
<button use:tooltip={{ text: 'No callout triangle', arrow: false }}>No arrow</button>
<button use:tooltip={{ text: 'Bigger anchor gap', offset: 16 }}>Wide gap</button>
<button use:tooltip={{ text: 'You will not see me', disabled: true }}>Disabled</button>

Already built in

Button — and every compound built on it: DataTable's icon controls + pagination and Query's clear/help — drive this from their title automatically. Native title tooltips are replaced library-wide.