Free pack

Tooltip `<mv-tooltip>`

Tooltip im Top Layer (Popover API), automatische Platzierung mit Flip, Pfeil, gruppierte Verzögerung.

So funktioniert es

Tooltip im Top Layer (Popover API), automatische Platzierung mit Flip, Pfeil, gruppierte Verzögerung. Für eine Toolbar teilt Tooltip Group eine einzige Fläche, die von einem Button zum nächsten gleitet.

Kategorie	Overlays
Typ	Web Component (`<mv-tooltip>`)
Status	stabil
Keywords	tooltip, hint, popover, morphic-tooltip

When to use

An icon-only button needs its label shown on hover and keyboard focus
A short supplementary hint clarifies a control without cluttering the layout

Avoid when

The content is interactive or must be reachable on touch devices → use Popover instead
Many adjacent toolbar buttons should share one gliding tooltip surface → use Tooltip Group instead
The preview is rich, such as a profile card with an avatar and details → use Hover Card instead

Installation

node scripts/add.mjs tooltip --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["tooltip"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/i18n.js, core/position.js, components/tooltip/tooltip.js, components/tooltip/tooltip.css.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div style="display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center">
  <mv-tooltip text="Above" placement="top"><button class="mv-button" data-variant="outline">Top</button></mv-tooltip>
  <mv-tooltip text="Below" placement="bottom"><button class="mv-button" data-variant="outline">Bottom</button></mv-tooltip>
  <mv-tooltip text="To the left" placement="left"><button class="mv-button" data-variant="outline">Left</button></mv-tooltip>
  <mv-tooltip text="To the right" placement="right"><button class="mv-button" data-variant="outline">Right</button></mv-tooltip>
  <mv-tooltip placement="top" delay="0">
    <button class="mv-button" data-variant="secondary">Rich</button>
    <div data-content><strong>⌘ K</strong>: open the palette</div>
  </mv-tooltip>
</div>

API

Attributes

Name	Typ	Standard	Beschreibung
`text`	string		Plain text (otherwise a [data-content] child).
`placement`	top \| bottom \| left \| right[-start\|-end]	`top`	Preferred side, flipped when there’s no room.
`delay`	number	`500`	Show delay (ms). Skipped if another tooltip just closed.
`offset`	number	`8`	Distance from the trigger (px).
`open`	boolean		Opens/closes programmatically.
`disabled`	boolean		Disables the tooltip.

Events

Name	Beschreibung
`mv-open`	After opening.
`mv-close`	After closing.

Content structure

Name	Beschreibung
`first child`	Trigger (button, link, focusable icon).
`[data-content]`	Optional rich content.

CSS variables

Name	Beschreibung
`--mv-tooltip-bg`	Background.
`--mv-tooltip-fg`	Text.

Accessibility

role=tooltip + aria-describedby on the trigger; opens on keyboard focus, closes on Escape. Doesn’t open on touch (use a Popover).