特性

• 支持悬停、聚焦、单击以及通过一个触发层控制可见性。
• 提供内置放置、自定义对齐、延迟、箭头和弹层动作。
• 为根节点、箭头节点和容器节点引入语义 classNames 和 styles 槽。
• 通过生成的工具提示 id 和 aria-describedby 保留可访问性连接。

安装

npm install @rc-component/tooltip

使用

import Tooltip from '@rc-component/tooltip';
import '@rc-component/tooltip/assets/bootstrap_white.css';

export default () => (
  <Tooltip placement="top" overlay={<span>Tooltip content</span>}>
    <button type="button">Hover me</button>
  </Tooltip>
);

在线预览：https://tooltip.react-component.vercel.app/

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Tooltip

| 名称 | 类型 | 默认值 | 说明 | | --------------------- | ---------------------------------------------------- | ------------------- | ---------------------------------------------------------- | | afterVisibleChange | (visible: boolean) => void | - | 弹层窗口可见性更改后调用。 | | align | AlignType | {} | 额外弹层对齐配置。 | | arrowContent | React.ReactNode | - | 自定义箭头内容。 | | builtinPlacements | TriggerProps['builtinPlacements'] | built-in placements | 传递给触发器的放置映射。 | | children | React.ReactElement | - | 所需的触发元素。 | | classNames | Partial<Record<SemanticName, string>> | - | 根节点、箭头节点和容器节点的语义化类名。 | | defaultVisible | boolean | - | 初始不受控制的可见状态。 | | destroyOnHidden | boolean | false | 隐藏时销毁弹层 DOM。 | | fresh | boolean | - | 关闭时保持弹层内容新鲜。 | | getTooltipContainer | (node: HTMLElement) => HTMLElement | - | 指定弹层容器。 | | id | string | generated id | 用于辅助功能的工具提示 ID。 | | motion | TriggerProps['popupMotion'] | - | 弹层运动配置。 | | mouseEnterDelay | number | 0 | 鼠标移入后显示的延迟（秒）。 | | mouseLeaveDelay | number | 0.1 | 鼠标移出后隐藏的延迟（秒）。 | | onPopupAlign | TriggerProps['onPopupAlign'] | - | 弹层对齐后调用。 | | onVisibleChange | (visible: boolean) => void | - | 当可见性发生变化时调用。 | | overlay | React.ReactNode | () => React.ReactNode | - | 提示内容。 | | placement | string | 'right' | 弹层放置。 | | prefixCls | string | 'rc-tooltip' | 前缀 className。 | | showArrow | boolean | ArrowType | true | 是否显示箭头，或提供箭头配置。 | | styles | Partial<Record<SemanticName, React.CSSProperties>> | - | 根节点、箭头节点和容器节点的语义样式。 | | trigger | ActionType | ActionType[] | ['hover'] | 显示提示的触发行为。 | | unique | TriggerProps['unique'] | - | 实验性独特的容器重用配置。 | | visible | boolean | - | 受控可见状态。 | | zIndex | number | - | 弹层 z 索引。 |

本地开发

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/tooltip 基于 MIT 许可证发布。