组件 · 浮层 · 原生 HTML 与 React
提示 Tooltip
悬停或键盘聚焦时出现的一句话说明;只放说明,不放操作。
演示
<button class="xxd-btn" data-icon-only aria-label="搜索" data-tooltip="搜索 ⌘F"><i data-xxd-icon="Search"></i></button>export function TooltipDemo() {
return (
<TooltipProvider>
<Tooltip content="搜索 ⌘F" render={<Button shape="square" aria-label="搜索" icon={<Icon name="Search" />} />} />
</TooltipProvider>
);
}
function ToastButton() {
const toasts = useKumoToastManager();
return <Button onClick={() => toasts.add({ title: "已保存草稿" })}>弹个 toast</Button>;
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-tooltip | 提示文字 |
| data-tooltip-placement | top(缺省)| bottom | top-start … |
| data-tooltip-arrow | 带小箭头 |
| 类名 | xxd-tooltip |
键盘与读屏
- 键盘聚焦也会出现,Esc 收起;通过 aria-describedby 连到按钮
- 只有图标的按钮仍要有 aria-label——tooltip 是补充,不是名字
规则
- 11px,小阴影;hover 400ms,聚焦立即
- 连续出现:关掉后 300ms 内移到别的按钮立即出现(tooltip 组)