Tooltip 文字提示

简单的文字提示气泡框。

何时使用

鼠标移入则显示提示,移出消失,气泡浮层不承载复杂文本和操作。

可用来代替系统默认的 title 提示,提供一个按钮/文字/操作的文案解释。

代码演示

基本

最简单的用法。

Tooltip文字提示 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tooltip } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Tooltip title="prompt text">
  6. <span>Tooltip will show when mouse enter.</span>
  7. </Tooltip>,
  8. document.getElementById('container'));

位置

位置有 12 个方向。

Tooltip文字提示 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tooltip, Button } from 'choerodon-ui';
  4. const text = <span>prompt text</span>;
  5. const buttonWidth = 70;
  6. ReactDOM.render(
  7. <div className="demo">
  8. <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
  9. <Tooltip placement="topLeft" title={text}>
  10. <Button style={{ marginRight: '4px' }}>TL</Button>
  11. </Tooltip>
  12. <Tooltip placement="top" title={text}>
  13. <Button style={{ marginRight: '4px' }}>Top</Button>
  14. </Tooltip>
  15. <Tooltip placement="topRight" title={text}>
  16. <Button style={{ marginRight: '4px' }}>TR</Button>
  17. </Tooltip>
  18. </div>
  19. <div style={{ width: buttonWidth, float: 'left' }}>
  20. <Tooltip placement="leftTop" title={text}>
  21. <Button style={{ marginTop: '4px' }}>LT</Button>
  22. </Tooltip>
  23. <Tooltip placement="left" title={text}>
  24. <Button style={{ marginTop: '4px' }}>Left</Button>
  25. </Tooltip>
  26. <Tooltip placement="leftBottom" title={text}>
  27. <Button style={{ marginTop: '4px' }}>LB</Button>
  28. </Tooltip>
  29. </div>
  30. <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 }}>
  31. <Tooltip placement="rightTop" title={text}>
  32. <Button style={{ marginTop: '4px' }}>RT</Button>
  33. </Tooltip>
  34. <Tooltip placement="right" title={text}>

箭头指向

设置了 arrowPointAtCenter 后,箭头将指向目标元素的中心。

Tooltip文字提示 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Tooltip, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <div>
  6. <Tooltip placement="topLeft" title="Prompt Text">
  7. <Button style={{ marginRight: '4px' }}>Align edge / 边缘对齐</Button>
  8. </Tooltip>
  9. <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
  10. <Button style={{ marginRight: '4px' }}>
  11. Arrow points to center / 箭头指向中心
  12. </Button>
  13. </Tooltip>
  14. </div>,
  15. document.getElementById('container'),
  16. );

API

参数说明类型默认值
title提示文字string|ReactNode|() => ReactNode

共同的 API

以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。

参数说明类型默认值
arrowPointAtCenter箭头是否指向目标元素中心booleanfalse
autoAdjustOverflow气泡被遮挡时自动调整位置booleantrue
defaultVisible默认是否显隐booleanfalse
getPopupContainer浮层渲染父节点,默认渲染到 body 上。2.5.2 之前请使用 getTooltipContainerFunction(triggerNode)() => document.body
mouseEnterDelay鼠标移入后延时多少才显示 Tooltip,单位:秒number0
mouseLeaveDelay鼠标移出后延时多少才隐藏 Tooltip,单位:秒number0.1
overlayClassName卡片类名string
overlayStyle卡片样式object
placement气泡框位置,可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringtop
trigger触发行为,可选 hover/focus/click/contextMenustringhover
visible用于手动控制浮层显隐booleanfalse
onVisibleChange显示隐藏的回调(visible) => void

注意

请确保 Tooltip 的子元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。