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={undefined}>
    <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.

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.

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
titleprompt textstring/React.Element-

Common API#

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

PropertyDescriptionTypeDefault
placementto set the position, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottomstringtop
getPopupContainerto 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.2Function(triggerNode)() => document.body
arrowPointAtCenterwhether arrow pointed at the center of target, supported after antd@1.11+booleanfalse
autoAdjustOverflowwhether adjust popup placement automatically when popup is invisiblebooleantrue
visiblemake the float card visible or notbooleanfalse
onVisibleChangecallback of the visible attribute changed(visible) => voidnone
mouseEnterDelaydelay time to show when mouse enter.unit: snumber0
mouseLeaveDelaydelay time to hide when mouse leave.unit: snumber0.1
triggertriggering mode: can be hover, focus, or click.stringhover
overlayClassNameclass name of the cardstringnone
overlayStylestyle of the cardobjectnone

Note#

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