向您的编辑器添加提示工具 UI 组件

当悬停在元素上时出现的小信息弹出框。

安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加该原始组件。

npx @tiptap/cli add tooltip

手动集成

对于 Vite 或 Next.js 以外的框架，请从开源代码库手动添加该原始组件。

导入样式

此组件需要您导入我们添加到 styles/keyframe-animation.scss 和 styles/_variables.scss 的样式。

使用方法

import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/tiptap-ui-primitive/tooltip'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button data-style="ghost">悬停我</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>提示工具内容</p>
      </TooltipContent>
    </Tooltip>
  )
}

属性

名称	类型	默认值	描述
open	boolean	undefined	受控的打开状态
onOpenChange	(open: boolean) => void	undefined	打开状态变化时的回调
defaultOpen	boolean	false	默认打开状态
delayDuration	number	300	提示工具出现前的延时（毫秒）
skipDelayDuration	number	300	在不同提示工具之间移动时跳过延时

TooltipTrigger

名称	类型	默认值	描述
asChild	boolean	false	是否将属性与子元素合并

TooltipContent

名称	类型	默认值	描述
side	'top' \| 'right' \| 'bottom' \| 'left'	'top'	显示内容的首选侧面
align	'start' \| 'center' \| 'end'	'center'	边缘对齐