Free pack

Tooltip `<mv-tooltip>`

位于顶层（Popover API）的工具提示，自动定位并可翻转，带箭头和分组延迟。

工作原理

位于顶层（Popover API）的提示框，自动定位并支持翻转、箭头、分组延迟。在工具栏中，Tooltip Group 共用一个浮层，在按钮之间滑动切换。

分类	浮层
类型	Web Component（`<mv-tooltip>`）
状态	稳定版
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

安装

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

使用 Marvelous UI MCP 服务器的 AI 智能体：install_components({ slugs: ["tooltip"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

复制的文件（含依赖）：tokens/tokens.css、core/base.css、core/dom.js、core/element.js、core/position.js、components/tooltip/tooltip.js、components/tooltip/tooltip.css。

用法

标准标记，可在此基础上通过属性、data-* 和 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	类型	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).