Tooltip / 文字提示

在悬停时显示额外的提示信息。

基础的

基础示例。

触发方式

使用点击触发提示框。

组件组合

与不同的组件组合使用。

定制内容

你可以自定义弹出框的内容。

类型

我们为不同的类型预置了样式。

变体

特殊样式。

对齐方式

有 12 种对齐方式可用。

APIs / 接口文档

Tooltip.Props

属性描述类型推荐值默认
text弹出框文字string React.ReactNode--
visible手动控制提示框的显示与隐藏boolean-false
initialVisible初始是否可见boolean-false
hideArrow隐藏箭头boolean-false
type不同的文字提示类型TooltipTypes-default
placement提示框与目标的对齐方式Placement-top
trigger触发提示框的方式'click' / 'hover'-hover
enterDelay(ms)在提示显示前的延迟number-100
leaveDelay(ms)关闭提示前的延迟 (仅 'hover' 模式)number-150
offset(px)提示框与目标之间的偏移number-12
portalClassName弹出框的类名string--
onVisibleChange当提示框状态改变时触发(visible: boolean) => void--
...原生属性HTMLAttributes'id' ...-

TooltipTypes

type TooltipTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'

Placement

type Placement = 'top'
  | 'topStart',
  | 'topEnd',
  | 'left',
  | 'leftStart',
  | 'leftEnd',
  | 'bottom',
  | 'bottomStart',
  | 'bottomEnd',
  | 'right',
  | 'rightStart',
  | 'rightEnd',
Add