Tooltip

A simple text popup tip.

When To Use#

  • The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.

  • To provide an explanation of a button/text/operation. It's often used instead of the html title attribute.

Examples

Tooltip will show when mouse enter.

The simplest usage.

expand codeexpand code
import { Tooltip } from 'antd';

ReactDOM.render(
  <Tooltip title="prompt text">
    <span>Tooltip will show when mouse enter.</span>
  </Tooltip>
, mountNode);

By specifying arrowPointAtCenter prop, the arrow will point to the center of the target element.

expand codeexpand code
import { Tooltip, Button } from 'antd';

ReactDOM.render(
  <div>
    <Tooltip placement="topLeft" title="Prompt Text">
      <Button>Align edge / 边缘对齐</Button>
    </Tooltip>
    <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
      <Button>Arrow points to center / 箭头指向中心</Button>
    </Tooltip>
  </div>
, mountNode);

The ToolTip has 12 placements choice.

expand codeexpand code
import { Tooltip } from 'antd';
const text = <span>prompt text</span>;

ReactDOM.render(
  <div>
    <div style={{ marginLeft: 60 }}>
      <Tooltip placement="topLeft" title={text}>
        <a href="#">TL</a>
      </Tooltip>
      <Tooltip placement="top" title={text}>
        <a href="#">Top</a>
      </Tooltip>
      <Tooltip placement="topRight" title={text}>
        <a href="#">TR</a>
      </Tooltip>
    </div>
    <div style={{ width: 60, float: 'left' }}>
      <Tooltip placement="leftTop" title={text}>
        <a href="#">LT</a>
      </Tooltip>
      <Tooltip placement="left" title={text}>
        <a href="#">Left</a>
      </Tooltip>
      <Tooltip placement="leftBottom" title={text}>
        <a href="#">LB</a>
      </Tooltip>
    </div>
    <div style={{ width: 60, marginLeft: 270 }}>
      <Tooltip placement="rightTop" title={text}>
        <a href="#">RT</a>
      </Tooltip>
      <Tooltip placement="right" title={text}>
        <a href="#">Right</a>
      </Tooltip>
      <Tooltip placement="rightBottom" title={text}>
        <a href="#">RB</a>
      </Tooltip>
    </div>
    <div style={{ marginLeft: 60, clear: 'both' }}>
      <Tooltip placement="bottomLeft" title={text}>
        <a href="#">BL</a>
      </Tooltip>
      <Tooltip placement="bottom" title={text}>
        <a href="#">Bottom</a>
      </Tooltip>
      <Tooltip placement="bottomRight" title={text}>
        <a href="#">BR</a>
      </Tooltip>
    </div>
  </div>
, mountNode);

API#

PropertyDescriptionTypeDefault
titleThe text shown in the tooltipstring|React.Element-

Common API#

The following APIs are shared by Tooltip, Popconfirm, Popover.

PropertyDescriptionTypeDefault
arrowPointAtCenterWhether the arrow is pointed at the center of target, supported after antd@1.11+booleanfalse
autoAdjustOverflowWhether to adjust popup placement automatically when popup is off screenbooleantrue
getPopupContainerThe DOM container of the tip, the default behavior is to create a div element in body. Use getTooltipContainer if you are using antd@<2.5.2Function(triggerNode)() => document.body
mouseEnterDelayDelay in seconds, before tooltip is shown on mouse enternumber0
mouseLeaveDelayDelay in seconds, before tooltip is hidden on mouse leavenumber0.1
overlayClassNameClass name of the tooltip cardstring-
overlayStyleStyle of the tooltip cardobject-
placementThe position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringtop
triggerTooltip trigger modehover | focus | clickhover
visibleWhether the floating tooltip card is visible or notbooleanfalse
onVisibleChangeCallback executed when visibility of the tooltip card is changed(visible) => void-

Note#

Please ensure that the child node of Tooltip accepts onMouseEnter, onMouseLeave, onFocus, onClick events.