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.

Basic

The simplest usage.

import { Tooltip } from 'antd';

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

Arrow pointing at the center

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

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);

TL Top TR

The ToolTip has 12 placements choice.

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#

Property	Description	Type	Default
title	The text shown in the tooltip	string\|React.Element	-

Common API#

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

Property	Description	Type	Default
placement	The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`	string	`top`
getPopupContainer	The 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.2`	Function(triggerNode)	() => document.body
arrowPointAtCenter	Whether the arrow is pointed at the center of target, supported after `antd@1.11+`	boolean	`false`
autoAdjustOverflow	Whether to adjust popup placement automatically when popup is off screen	boolean	`true`
visible	Whether the floating tooltip card is visible or not	boolean	`false`
onVisibleChange	Callback executed when visibility of the tooltip card is changed	(visible) => void	-
mouseEnterDelay	Delay in seconds, before tooltip is shown on mouse enter	number	0
mouseLeaveDelay	Delay in seconds, before tooltip is hidden on mouse leave	number	0.1
trigger	Tooltip trigger mode	`hover` \| `focus` \| `click`	`hover`
overlayClassName	Class name of the tooltip card	string	-
overlayStyle	Style of the tooltip card	object	-

Note#

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