Tooltip

A short hint shown on hover or keyboard focus.

Installation

pnpm dlx @mielui/svelte add tooltip

Usage

Wrap a focusable control in Trigger and put its hint in Content. The hint opens when the pointer rests or the keyboard focuses, and Escape closes it. Root and Provider add no element, and Trigger wraps its child in an inline span.

<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Tooltip from '@mielui/svelte/components/tooltip';
</script>

<Tooltip.Root>
    <Tooltip.Trigger>
        <Button variant="outline">Info</Button>
    </Tooltip.Trigger>
    <Tooltip.Content>Helpful text here</Tooltip.Content>
</Tooltip.Root>

placement on Root picks the side, top by default, and the bubble flips when it would leave the viewport. delay and closeDelay are in milliseconds, 500 and 100 by default. delay is how long the pointer rests on the trigger: keyboard focus opens the tooltip at once, while a click that focuses the trigger still waits. Moving to another trigger while a tooltip is open skips the delay. Set showOnClick on Trigger to also show the tooltip on click, for touch screens or to confirm a copy.

Examples

Top placement

Right placement

Bottom placement

Rich content and Provider

Content shows plain text by default. Set rich to keep formatting and SVG icons. The bubble is a passive copy without ids, event handlers, or form controls, so use Popover for links and buttons. All tooltips share one moving bubble; wrap a region in Tooltip.Provider to give it its own bubble.

Glass surface

surface="glass" on Content gives the bubble a translucent, blurred background. Leave surface out to follow the theme, or set surface="solid" to override it. Glass falls back to an opaque surface when backdrop filters are unavailable or reduced transparency is on.

API reference

Tooltip.Root

Controls tooltip state.

delay

number
Milliseconds the pointer rests on the trigger before the tooltip opens. Keyboard focus opens it at once, and a neighbour opens at once while one is showing.

Default 500
closeDelay

number
Milliseconds after the pointer leaves before it closes.

Default 100
placement

TooltipPlacement
Side of the trigger the tooltip opens on.

Default 'top'
children

Snippet<[]>
Content rendered inside.

Tooltip.Content

Renders tooltip content.

class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.
surface

"solid" | "glass"
Surface treatment. Omit it to inherit --mielui-surface from the theme.
rich

boolean
Shows the content's markup in the bubble instead of its plain text.

Default false

Tooltip.Provider

children

Snippet<[]>
Content rendered inside.

Tooltip.Trigger

Opens the tooltip.

showOnClick

boolean
Also shows the tooltip when the trigger is clicked, for touch screens.

Default false
class

string
Classes added to the element.
children

Snippet<[]>
Content rendered inside.