Skip to content
omaris

Communication

Tooltip

MD3 tooltip — plain and rich.

import { Tooltip } from 'omaris'
Learn

Examples

Plain

Wrap the thing it describes. It waits before showing, and flips if it must.

Svelte 
<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>

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>

When to use it

Use it for

  • Naming an Icon Button. Wrap it and pass text with the same words as its aria-label. On a toolbar the first waits; the rest open as fast as the pointer moves.
  • A line about a truncated cell, a chart point or an abbreviation. Plain text, a phrase long.
  • Context worth a paragraph and a link, like what a retention window means. title turns on rich mode, content is the body, actions the buttons. It stays open while the pointer is inside.
  • open to pin one for a screenshot or a story.

Not for

  • Anything needed to finish the task → put it on the page, as supportingText or an Alert. On a phone a tooltip only appears on long press.
  • The only name a control has → a visible label or an aria-label. A tooltip describes; it does not name.
  • Content people interact with, like a form or a list → Menu, Sheet or Dialog. Only a rich tooltip's actions are reachable.
  • A sequence of hints → Tour.
  • Something that just happened → Toast.

Do

  • Wrap the thing it describes. The wrapper is the anchor; hover, focus and long press all open it, so keyboard users get it too.
  • Keep a plain tooltip to a phrase. It caps at 16rem and wraps into a block after that.
  • Set side to where there is usually room. It flips when there is none, but one that always flips looks wrong.
  • Leave delay alone across an app. 0 makes every hover flash.

Don't

  • Put one on a disabled button. It gets no hover and no focus, so it never opens. Say why in text beside it.
  • Attach one to plain text. A <span> never takes focus, so it becomes pointer-only. Give the trigger tabindex="0" or make it a button.
  • Repeat the visible label. "Save" under a button that says Save is noise.
  • Use rich when plain would do. A rich tooltip needs a title and a reason to exist.
Pairs with Icon Button Button Tour Menu Text

API

Tooltip

MD3 tooltip — plain and rich.

Wrap whatever it describes; the wrapper is the anchor, and hover, focus and long-press all open it. The tooltip itself is portalled to the body and positioned with the shared anchor action, so it escapes scroll containers and flips when it runs out of room.

A plain tooltip is the trigger's accessible description. A rich one has a title, body and actions, so it's a dialog you can move the pointer into — it stays open while the pointer is over it.

import { Tooltip } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
No description in the source yet.
surface
No description in the source yet.
title
No description in the source yet.
body
No description in the source yet.
actions
No description in the source yet.

Props

text
string

Plain-tooltip text.

title
string

Heading of a rich tooltip. Its presence turns rich mode on.

side

Defaults to 'top'

AnchorSide

Which side to prefer. Flips when there isn't room.

align

Defaults to 'center'

AnchorAlign
offset

Defaults to 8

number

Gap between the trigger and the tooltip, in px.

delay

Defaults to 500

number

Delay before opening, in ms. Suppressed once one is already open.

open bindable

Defaults to false

boolean

Keep it open. Useful for a story or a walkthrough.

disabled

Defaults to false

boolean
class
string
classes
TooltipClasses

Per-part Tailwind overrides. class still covers the root.

children
Snippet

The trigger.

content
Snippet

Rich body, in place of text.

actions
Snippet

Buttons along the bottom of a rich tooltip.