Tooltip
MD3 tooltip — plain and rich.
Walkthrough
1. Plain
Wrap the thing it describes. It waits before showing, and flips if it must.
<script lang="ts"> import { IconButton, Tooltip } from 'omaris';</script>{#snippet trash()} ...{/snippet}<Tooltip text="Delete this invoice"> <IconButton aria-label="Delete this invoice">{@render trash()}</IconButton></Tooltip><Tooltip text="Opens in a new tab" side="bottom"> <a href="https://svelte.dev" class="inline-flex min-h-6 items-center text-body-md text-primary underline-offset-4 hover:underline" > Svelte </a></Tooltip>2. Rich
A rich tooltip has a title, body and actions, and stays open while the pointer is inside it — so its links are actually reachable.
<script lang="ts"> import { Button, Tooltip } from 'omaris';</script><Tooltip title="Chroma" side="bottom"> {#snippet content()} <p>How saturated the whole palette is. 0 is monochrome, 1 as designed.</p> {/snippet} {#snippet actions()} <Button size="xs" variant="text">Learn more</Button> {/snippet} <Button variant="outlined">What is chroma?</Button></Tooltip>