工具提示
工具提示在用户悬停、聚焦或点击元素时显示信息性文本。
<Tooltip />Playground
底部
组件
在安装 后，你可以使用以下基本元素开始构建此组件
import Tooltip from '@mui/joy/Tooltip';
export default function MyApp() {
return <Tooltip />;
}
变体
工具提示组件支持四种全局变体：solid（默认）、soft、outlined 和 plain。
按 Enter 键开始编辑
颜色
主题中包含的每个调色板都可通过 color 属性使用。尝试将不同的颜色与不同的变体结合使用。
变体
尺寸
工具提示组件开箱即用地提供三种尺寸：sm、md（默认）和 lg。
按 Enter 键开始编辑
定位的工具提示
Tooltip 组件有 12 种位置选择。它们没有方向箭头；相反，它们依靠源头发出的运动来传达方向。
箭头工具提示
你可以使用 arrow 属性为你的工具提示添加一个箭头，指示它指向哪个元素。
按 Enter 键开始编辑
无障碍
以下是一些基于 WAI-ARIA 创作实践的确保链接组件可访问性的技巧
默认情况下，工具提示仅标记其子元素。这与 title 显着不同，title 可以标记或描述其子元素，具体取决于子元素是否已具有标签。例如，在
<button title="some more information">A button</button>
title 充当可访问的描述。如果你希望工具提示充当可访问的描述，你可以传递 describeChild。请注意，如果工具提示提供唯一的视觉标签，则不应使用 describeChild。否则，子元素将没有可访问的名称，并且工具提示将违反 WCAG 2.1 中的成功标准 2.5.3。
按 Enter 键开始编辑
无样式
使用 Base UI Tooltip 可以完全掌控组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此无样式版本的组件是需要重度自定义和更小捆绑包大小的理想选择。