Studio
2

Tooltip

Installation

pnpm dlx @mielui/svelte add tooltip

Usage

Wrap the focusable control in Trigger and put its description in Content. Existing aria-describedby references are preserved. Escape dismisses visible or pending help.

Tooltips share one moving bubble. Wrap a region in Tooltip.Provider for an independent bubble that is removed with the provider. Reduced motion disables rolling text.

Content displays plain text by default. Set rich to retain noninteractive formatting and SVG icons. The bubble is a passive copy without IDs, event handlers, or form controls. Use Popover for links, buttons, and other interactive content.

import * as Tooltip from '$lib/mielui/components/tooltip';

<Tooltip.Root>
  <Tooltip.Trigger>
    <button>Info</button>
  </Tooltip.Trigger>
  <Tooltip.Content>Helpful text here</Tooltip.Content>
</Tooltip.Root>

Rich content and scoped sharing

Examples

Top placement

Bottom placement

Glass surface

Set surface="glass" on Tooltip.Content for a translucent background with blur. Omit surface to inherit --mielui-surface from your theme, or set surface="solid" to override it. Glass uses the matching foreground color for its surface. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

Tooltip.Root

Controls tooltip state.

Prop Type Default
delay number | undefined 125
closeDelay number | undefined 100
placement TooltipPlacement | undefined 'top'
children Snippet<[]> | undefined —

Tooltip.Content

Renders tooltip content.

Prop Type Default
class string | undefined —
children Snippet<[]> | undefined —
surface "solid" | "glass" | undefined —
rich boolean | undefined false

Tooltip.Provider

Prop Type Default
children Snippet<[]> | undefined —

Tooltip.Trigger

Opens the tooltip.

Prop Type Default
showOnClick boolean | undefined false
class string | undefined —
children Snippet<[]> | undefined —