Tooltip

悬浮提示,需在应用根部包裹 reka-ui 的 TooltipProvider。Nuxt 项目通过 @tripo3d/design/nuxt 模块自动处理。

Anatomy

• Tooltip提示根,管理打开状态与延迟
  • TooltipTrigger触发元素,默认渲染为 <button>
  • TooltipContent浮层内容,支持方向与偏移配置

基本用法

默认

<script setup lang="ts">
import { Tooltip, TooltipContent, TooltipTrigger } from '@tripo3d/design';
</script>

<template>
  <Tooltip>
    <TooltipTrigger>
      <button>悬停我</button>
    </TooltipTrigger>
    <TooltipContent>这是一段提示信息</TooltipContent>
  </Tooltip>
</template>

不同方向

side

通过 TooltipContent.side 控制弹出方向。

<Tooltip>
  <TooltipTrigger><button>上</button></TooltipTrigger>
  <TooltipContent side="top">Top</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger><button>右</button></TooltipTrigger>
  <TooltipContent side="right">Right</TooltipContent>
</Tooltip>

触摸设备支持

touchable

启用后,触摸设备可通过点击 trigger 打开/关闭,桌面端保持 hover 体验。

<Tooltip touchable>
  <TooltipTrigger>
    <button>点击或悬停</button>
  </TooltipTrigger>
  <TooltipContent>触摸设备通过点击查看</TooltipContent>
</Tooltip>

API

Tooltip Props

名称	类型	默认值	说明
open	boolean	—	受控打开状态
defaultOpen	boolean	—	非受控初始状态
delayDuration	number	0	hover 后显示延迟(ms)
touchable	boolean	false	启用触摸设备的点击触发

Tooltip Events

事件	Payload	说明
update:open	(value: boolean)	打开状态变化

TooltipContent Props

名称	类型	默认值	说明
side	'top' | 'right' | 'bottom' | 'left'	'top'	弹出方向
sideOffset	number	12	与触发器的距离
collisionPadding	number	12	与视口边缘的安全距离
class	string	—	浮层 class

其余 props 透传至 reka-ui TooltipContent,详见 reka-ui 文档。

TooltipTrigger Props

名称	类型	默认值	说明
as	AsTag	'button'	渲染的 HTML 标签
asChild	boolean	—	将子元素作为根元素渲染

可访问性

• 基于 reka-ui,TooltipTrigger 默认渲染为 <button>,提示内容关联到 trigger 的 aria-describedby
• 支持键盘:聚焦 trigger 自动打开,Esc 关闭
• 使用 delayDuration 避免悬浮闪烁;需要即时反馈时设为 0
• 需在应用根部挂载 TooltipProvider(Nuxt 项目自动完成)