Tooltip

工具提示用于对特定元素提供补充文本提示或上下文信息，以便用户更好地理解该元素的功能或用途。

使用方法

按需导入组件：

import 'mdui/components/tooltip.js';

按需导入组件的 TypeScript 类型：

import type { Tooltip } from 'mdui/components/tooltip.js';

使用示例：

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

示例

纯文本 tooltip

默认为纯文本 tooltip。可以通过 content 属性设置 tooltip 的内容。

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

也可以通过 content slot 设置 tooltip 的内容。

button

title

content

<mdui-tooltip>
  <mdui-button>button</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">title</div>
    <div>content</div>
  </div>
</mdui-tooltip>

Code

富文本 tooltip

设置 variant 属性为 rich 可以创建富文本 tooltip。可以通过 headline 属性设置 tooltip 的标题，content 属性设置 tooltip 的内容。

button

<mdui-tooltip
  variant="rich"
  headline="Rich tooltip"
  content="Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text."
>
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

也可以通过 headline、content slot 设置 tooltip 的标题和内容。通过 action slot 设置 tooltip 的操作按钮。

button

Rich tooltip

Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.

Action

<mdui-tooltip variant="rich">
  <mdui-button>button</mdui-button>
  <div slot="headline">Rich tooltip</div>
  <div slot="content">Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.</div>
  <mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>

Code

位置

通过 placement 属性可以设置 tooltip 的位置。

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

Code

触发方式

通过 trigger 属性，可以设置 tooltip 的触发方式。

button

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

打开/关闭延时

当触发方式为 hover 时，可以通过 open-delay 和 close-delay 属性分别设置打开和关闭 tooltip 的延时，单位为毫秒。

button

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

禁用状态

通过添加 disabled 属性，可以禁用 tooltip。

button

<mdui-tooltip disabled content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

API

Properties

Attribute	Property	Type	Default
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
tooltip 的形状。默认为 `plain`。可选值包括： `plain`：纯文本，适用于简单的单行文本 `rich`：富文本，可以包含标题、正文和操作按钮
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
tooltip 的位置。默认为 `auto`。可选值包括： `auto`：自动判断位置。`variant="plain"` 时，优先使用 `top`；`variant="rich"` 时，优先使用 `bottom-right` `top-left`：位于左上方 `top-start`：位于上方，左对齐 `top`：位于上方，居中对齐 `top-end`：位于上方，右对齐 `top-right`：位于右上方 `bottom-left`：位于左下方 `bottom-start`：位于下方，左对齐 `bottom`：位于下方，居中对齐 `bottom-end`：位于下方，右对齐 `bottom-right`：位于右下方 `left-start`：位于左侧，顶部对齐 `left`：位于左侧，居中对齐 `left-end`：位于左侧，底部对齐 `right-start`：位于右侧，顶部对齐 `right`：位于右侧，居中对齐 `right-end`：位于右侧，底部对齐
`open-delay`	`openDelay`	`number`	`150`
鼠标悬浮触发显示的延时，单位为毫秒
`close-delay`	`closeDelay`	`number`	`150`
鼠标悬浮触发隐藏的延时，单位为毫秒
`headline`	`headline`	`string`	-
tooltip 的标题。仅 `variant="rich"` 时可使用。也可以通过 `slot="headline"` 设置
`content`	`content`	`string`	-
tooltip 的内容。也可以通过 `slot="content"` 设置
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
触发方式，支持多个值，用空格分隔。可选值包括： `click`：点击时触发 `hover`：鼠标悬浮时触发 `focus`：聚焦时触发 `manual`：只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式
`disabled`	`disabled`	`boolean`	`false`
是否禁用 tooltip
`open`	`open`	`boolean`	`false`
是否显示 tooltip

Events

Name
`open`
tooltip 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 打开
`opened`
tooltip 显示动画完成时，事件被触发
`close`
tooltip 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 关闭
`closed`
tooltip 隐藏动画完成时，事件被触发

Slots

Name
(default)
tooltip 触发的目标元素，只有 `default` slot 中的第一个元素会作为目标元素
`headline`
tooltip 的标题，只有当 `variant="rich"` 时，此 slot 才有效
`content`
tooltip 的内容，可以包含 HTML。若只包含纯文本，可以使用 `content` 属性代替
`action`
tooltip 底部的按钮，只有当 `variant="rich"` 时，此 slot 才有效

CSS Parts

Name
`popup`
tooltip 的容器
`headline`
标题
`content`
正文
`action`
操作按钮

CSS Custom Properties

Name
`--shape-corner-plain`
当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用设计令牌
`--shape-corner-rich`
当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用设计令牌
`--z-index`
组件的 CSS `z-index` 值

TextField

Up Next

TopAppBar