Tooltip

A simple text popup tip.

When To Use#

The tip shows while mouse enter, and hides while mouse leave. The Tooltip doesn't support complex text and operation.
It can provide an explanation of button/text/operation that can cover the usage of the default system title.

Examples

Tooltip will show when mouse enter.

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	prompt text	string/React.Element	-

Common API#

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

Property	Description	Type	Default
placement	to set the position, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`	string	top
getPopupContainer	to set the container of the tip, while the default is to create a `div` element in `body`. Use `getTooltipContainer` if you are using `antd@<2.5.2`	Function(triggerNode)	() => document.body
arrowPointAtCenter	whether arrow pointed at the center of target, supported after `antd@1.11+`	boolean	`false`
visible	make the float card visible or not	boolean	false
onVisibleChange	callback of the visible attribute changed	(visible) => void	none
mouseEnterDelay	delay time to show when mouse enter.unit: s	number	0
mouseLeaveDelay	delay time to hide when mouse leave.unit: s	number	0.1
trigger	triggering mode: can be hover, focus, or click.	string	hover
overlayClassName	class name of the card	string	none
overlayStyle	style of the card	object	none

Note#

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