Tooltip 提示

通过键盘焦点和指针悬停提供简短的补充说明。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

提示只补充按钮含义;键盘焦点和指针悬停使用同一段简短、非交互内容。
本地提示状态
提示:已隐藏;本地操作次数:0
根据触发器周围空间选择上、下、左、右四种方向。
宿主可以持有提示开关;禁用提示不会响应焦点或悬停。
提示当前隐藏

使用建议

只承载补充信息

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.
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非受控模式下是否默认打开。booleanfalse
placement浮层相对于触发元素的首选放置位置。BaseTooltipPlacement'top'
disabled是否禁用该组件及其可交互行为。booleanfalse
portal是否通过 Portal 将浮层挂载到外部容器。booleanfalse
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance
className追加到组件根元素的 CSS 类名。string
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseTooltipClassNames
style追加到组件根元素的内联样式。CSSProperties
onOpenChange打开状态变化时调用的回调,参数为新的打开状态。(open: boolean) => void