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。可以通过 content 属性设置 tooltip 的内容。
button
<mdui-tooltip content="Plain tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
源码也可以通过 content slot 设置 tooltip 的内容。
<mdui-tooltip>
<mdui-button>button</mdui-button>
<div slot="content">
<div style="font-size: 1.4em">title</div>
<div>content</div>
</div>
</mdui-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>
源码也可以通过 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>
源码
通过 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>
源码
通过 trigger 属性，可以设置 tooltip 的触发方式。
button
<mdui-tooltip trigger="click" content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
源码
当触发方式为 hover 时，可以通过 open-delay 和 close-delay 属性分别设置打开和关闭 tooltip 的延时，单位为毫秒。
button
<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
源码
通过添加 disabled 属性，可以禁用 tooltip。
button
<mdui-tooltip disabled content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
源码| HTML 属性 | JavaScript 属性 | Reflect | 类型 | 默认值 |
|---|
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="plan" 时，优先使用 top；variant="rich" 时，优先使用 bottom-righttop-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
|
| 名称 |
|---|
open |
tooltip 开始显示时，事件被触发。可以通过调用 event.preventDefault() 阻止 tooltip 打开
|
opened |
tooltip 显示动画完成时，事件被触发
|
close |
tooltip 开始隐藏时，事件被触发。可以通过调用 event.preventDefault() 阻止 tooltip 关闭
|
closed |
tooltip 隐藏动画完成时，事件被触发
|
| 名称 |
|---|
| 默认 |
tooltip 触发的目标元素，只有 default slot 中的第一个元素会作为目标元素
|
headline |
tooltip 的标题，只有当 variant="rich" 时，此 slot 才有效
|
content |
tooltip 的内容，可以包含 HTML。若只包含纯文本，可以使用 content 属性代替
|
action |
tooltip 底部的按钮，只有当 variant="rich" 时，此 slot 才有效
|