Tooltip 文字提示

鼠标悬浮时显示提示文字。

基础用法

import { Tooltip } from '@airo-ui/react'

function Demo() {
  return (
    <Tooltip content="这是提示文字">
      <span>鼠标悬停查看提示</span>
    </Tooltip>
  )
}

不同方向

import { Tooltip } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <Tooltip content="上方提示" placement="top">
        <button>上</button>
      </Tooltip>
      <Tooltip content="下方提示" placement="bottom">
        <button>下</button>
      </Tooltip>
      <Tooltip content="左侧提示" placement="left">
        <button>左</button>
      </Tooltip>
      <Tooltip content="右侧提示" placement="right">
        <button>右</button>
      </Tooltip>
    </>
  )
}

延迟显示

import { Tooltip } from '@airo-ui/react'

function Demo() {
  return (
    <Tooltip content="延迟500ms显示" delay={500}>
      <button>悬停我</button>
    </Tooltip>
  )
}

禁用

import { Tooltip } from '@airo-ui/react'

function Demo() {
  return (
    <Tooltip content="不会显示" disabled>
      <button>此提示已禁用</button>
    </Tooltip>
  )
}

API

Props

名称	类型	默认值	说明
content	string	—	提示文字
placement	'top' | 'bottom' | 'left' | 'right'	'top'	显示方向
delay	number	200	延迟显示时间（毫秒）
disabled	boolean	false	是否禁用
children	ReactNode	—	触发元素（必填）