Tooltip 文字提示

为页面元素补充简短说明。

基础用法

basic.tsx

import { Button, Flex, Tooltip } from '@ifhover/leaf-ui';

import { Info } from 'lucide-react';

export function TooltipBasic() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
        <Tooltip key={placement} placement={placement} content="保存当前项目的修改">
          <Button variant="outline">{placement}</Button>
        </Tooltip>
      ))}
      <Tooltip content="该设置将应用到所有项目">
        <Button variant="ghost" startIcon={<Info />} aria-label="设置说明" />
      </Tooltip>
    </Flex>
  );
}

属性	类型	默认值	说明
`content`	`ReactNode`	必填	提示内容
`children`	`ReactElement`	必填	触发元素，需支持 ref 和事件
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'`	`'top'`	期望展示位置，空间不足时自动调整
`open / defaultOpen`	`boolean`	`false`	受控展开状态 / 初始状态
`onOpenChange`	`(open: boolean) => void`	—	展开状态变化
`disabled`	`boolean`	`false`	禁用提示
`enterDelay / leaveDelay`	`number`	`100`	指针进入 / 离开后的延迟，单位毫秒
`className`	`string`	—	提示浮层类名

类型

定义组件属性或组装列表时可导入相关类型。

import type { TooltipProps } from '@ifhover/leaf-ui';

使用说明

鼠标悬停或键盘聚焦均可展示，Escape 关闭。Tooltip 会保留触发元素原有事件、ref 和 aria-describedby。禁用按钮不接受焦点，可改用外层可聚焦 span 作为触发元素。提示中适合放说明文字；可交互操作请使用 Dropdown 或弹窗。

#Tooltip 文字提示

#基础用法

#Tooltip API

#类型

#使用说明

Tooltip 文字提示

基础用法

Tooltip API

类型

使用说明