示例
直接操作示例,查看组件在具体任务中的状态与反馈。
本地提示状态
使用建议
只承载补充信息
Tooltip 不应成为理解或完成操作的唯一途径;关键说明必须在页面正文、标签或错误信息中持续可见。
先让触发器可以独立理解
触发器本身需要可访问名称和明确操作语义,提示内容只解释快捷方式、边界或次要背景。
保持简短且非交互
使用一到两行纯说明,不把按钮、链接、表单或必须复制的长内容放进提示层。
引入方式
从已验证的公开子路径导入组件;全局样式接入方式见安装指南。
import { BaseTooltip } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Tooltip 不能承载唯一或关键说明,触摸设备也不能把悬停当作唯一入口;需要持久内容时应改用正文或其他具名容器。
- T17 尚缺 deterministic visual、touch/mobile hover 与最终 packed React 18/19 证据。
- Deterministic visual evidence, touch/mobile hover behavior, and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseTooltipProps
extends Omit<
HTMLAttributes<HTMLSpanElement>,
'children' | 'className' | 'content' | 'style'
> {
content?: ReactNode;
children?: ReactNode;
open?: boolean;
defaultOpen?: boolean;
placement?: BaseTooltipPlacement;
disabled?: boolean;
portal?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseTooltipClassNames;
style?: CSSProperties;
onOpenChange?: (open: boolean) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
content | 浮层或弹出区域中呈现的内容。 | ReactNode | — |
children | 在 BaseTooltip 内渲染的子内容;支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
open | 组件当前的受控打开状态。 | boolean | — |
defaultOpen | 非受控模式下是否默认打开。 | boolean | false |
placement | 浮层相对于触发元素的首选放置位置。 | BaseTooltipPlacement | 'top' |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
portal | 是否通过 Portal 将浮层挂载到外部容器。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseTooltipClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onOpenChange | 打开状态变化时调用的回调,参数为新的打开状态。 | (open: boolean) => void | — |