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 的内容。

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

富文本 tooltip

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

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

位置

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

触发方式

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

打开/关闭延时

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

禁用状态

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

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
variantvariant'plain' | 'rich''plain'

tooltip 的形状。默认为 plain。可选值包括:

  • plain:纯文本,适用于简单的单行文本
  • rich:富文本,可以包含标题、正文和操作按钮
placementplacement'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" 时,优先使用 topvariant="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-delayopenDelaynumber150

鼠标悬浮触发显示的延时,单位为毫秒

close-delaycloseDelaynumber150

鼠标悬浮触发隐藏的延时,单位为毫秒

headlineheadlinestring-

tooltip 的标题。仅 variant="rich" 时可使用。也可以通过 slot="headline" 设置

contentcontentstring-

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

triggertrigger'click' | 'hover' | 'focus' | 'manual' | string'hover focus'

触发方式,支持多个值,用空格分隔。可选值包括:

  • click:点击时触发
  • hover:鼠标悬浮时触发
  • focus:聚焦时触发
  • manual:只能通过编程方式打开和关闭 tooltip,不能再指定其他触发方式
disableddisabledbooleanfalse

是否禁用 tooltip

openopenbooleanfalse

是否显示 tooltip

事件

名称
open

tooltip 开始显示时,事件被触发。可以通过调用 event.preventDefault() 阻止 tooltip 打开

opened

tooltip 显示动画完成时,事件被触发

close

tooltip 开始隐藏时,事件被触发。可以通过调用 event.preventDefault() 阻止 tooltip 关闭

closed

tooltip 隐藏动画完成时,事件被触发

Slots

名称
默认

tooltip 触发的目标元素,只有 default slot 中的第一个元素会作为目标元素

headline

tooltip 的标题,只有当 variant="rich" 时,此 slot 才有效

content

tooltip 的内容,可以包含 HTML。若只包含纯文本,可以使用 content 属性代替

action

tooltip 底部的按钮,只有当 variant="rich" 时,此 slot 才有效

CSS Parts

名称
popup

tooltip 的容器

headline

标题

content

正文

action

操作按钮

CSS 自定义属性

名称
--shape-corner-plain

当 variant="plain" 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

--shape-corner-rich

当 variant="rich" 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

--z-index

组件的 CSS z-index

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库