Free pack

Tooltip `<mv-tooltip>`

Infobulle dans la top layer (Popover API), placement automatique avec retournement, flèche, délai groupé. Pour une barre d’outils, Tooltip Group partage une seule surface qui glisse d’un bouton à l’autre.

Catégorie	Superpositions
Type	Web Component (`<mv-tooltip>`)
Statut	stable
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

Agent IA avec le serveur MCP Marvelous UI : install_components({ slugs: ["tooltip"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/position.js, components/tooltip/tooltip.js, components/tooltip/tooltip.css.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<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	Type	Default	Description
`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	Description
`mv-open`	After opening.
`mv-close`	After closing.

Content structure

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

CSS variables

Name	Description
`--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).