Tooltip 工具提示

在悬停时显示附加信息。

导入

import { Tooltip } from 'asterui'

示例

基础工具提示

在悬停时出现的简单工具提示。

</>

Hover meThis is a tooltip

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <Tooltip tip="This is a tooltip">
        <Button>Hover me</Button>
      </Tooltip>
    )
}

export default App

位置

工具提示可以出现在不同的位置。

</>

TopTop tooltip

BottomBottom tooltip

LeftLeft tooltip

RightRight tooltip

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <div className="flex flex-wrap gap-4 justify-center py-8">
        <Tooltip tip="Top tooltip" position="top">
          <Button>Top</Button>
        </Tooltip>
        <Tooltip tip="Bottom tooltip" position="bottom">
          <Button>Bottom</Button>
        </Tooltip>
        <Tooltip tip="Left tooltip" position="left">
          <Button>Left</Button>
        </Tooltip>
        <Tooltip tip="Right tooltip" position="right">
          <Button>Right</Button>
        </Tooltip>
      </div>
    )
}

export default App

颜色

不同上下文的颜色变体。

</>

PrimaryPrimary tooltip

SecondarySecondary tooltip

AccentAccent tooltip

InfoInfo tooltip

SuccessSuccess tooltip

WarningWarning tooltip

ErrorError tooltip

import { Tooltip, Button, Space } from 'asterui'

function App() {
  return (
      <Space wrap>
        <Tooltip tip="Primary tooltip" color="primary">
          <Button color="primary">Primary</Button>
        </Tooltip>
        <Tooltip tip="Secondary tooltip" color="secondary">
          <Button color="secondary">Secondary</Button>
        </Tooltip>
        <Tooltip tip="Accent tooltip" color="accent">
          <Button color="accent">Accent</Button>
        </Tooltip>
        <Tooltip tip="Info tooltip" color="info">
          <Button color="info">Info</Button>
        </Tooltip>
        <Tooltip tip="Success tooltip" color="success">
          <Button color="success">Success</Button>
        </Tooltip>
        <Tooltip tip="Warning tooltip" color="warning">
          <Button color="warning">Warning</Button>
        </Tooltip>
        <Tooltip tip="Error tooltip" color="error">
          <Button color="error">Error</Button>
        </Tooltip>
      </Space>
    )
}

export default App

始终打开

强制工具提示保持可见。

</>

Always OpenAlways visible

import { Tooltip, Button } from 'asterui'

function App() {
  return (
      <Tooltip tip="Always visible" open>
        <Button>Always Open</Button>
      </Tooltip>
    )
}

export default App

API

Tooltip

属性	描述	类型	默认值
tip	工具提示文本内容	string	-
position	工具提示位置	'top' | 'bottom' | 'left' | 'right'	'top'
color	工具提示颜色	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
open	强制工具提示可见	boolean	false
children	触发工具提示的元素	React.ReactNode	-
className	额外的 CSS 类	string	-

可访问性

• 工具提示内容通过 aria-describedby 公开
• 工具提示在焦点和悬停时都会出现
• 所有颜色变体都有足够的颜色对比度
• 当工具提示包含可聚焦元素时可以使用箭头键