Quartz UI正在打磨
中文English planned
显示设置 / Display preferences
65 + 8
浮层组件版本 0.1.0

Tooltip 工具提示

在悬停或聚焦紧凑控件时补充简短、非关键的文字说明。

使用概览

适合使用

  • 图标按钮或被截断标签需要一句辅助解释时。

不建议使用

  • 说明是完成任务所必需，或内容需要链接、表单等交互时。

真实示例

复制操作提示

聚焦紧凑触发器时解释其具体作用。

正在加载示例…

安装

本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/tooltip.json

基础用法

导入

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@richardqiu/quartz/tooltip";

JSX

<TooltipProvider><Tooltip><TooltipTrigger aria-label="复制链接">复制</TooltipTrigger><TooltipContent>复制公开链接</TooltipContent></Tooltip></TooltipProvider>

状态与控制摘要

默认
已打开
已关闭
label · textactive · boolean

API 参考

属性类型默认值说明
delayDurationnumber700设置指针悬停后显示提示的等待时间。

组合结构

  1. 01TooltipProvider
  2. 02Tooltip
  3. 03TooltipTrigger
  4. 04TooltipContent

键盘约定

  • 焦点在延时后打开 Tooltip，Escape 关闭且不移动触发器焦点。

可访问性契约

  • TooltipTrigger 仍需自己的可访问名称，TooltipContent 只作补充说明。
  • 内容应简短且不可交互，关键指引不能只放在悬停提示中。