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 on mouse enter.

The simplest usage.

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

const App: React.FC = () => (
  <Tooltip title="prompt text">
    <span>Tooltip will show on mouse enter.</span>
  </Tooltip>
);

export default App;

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

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

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;

There are 12 placement options available.

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

const text = <span>prompt text</span>;

const buttonWidth = 70;

const App: React.FC = () => (
  <div className="demo">
    <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
      <Tooltip placement="topLeft" title={text}>
        <Button>TL</Button>
      </Tooltip>
      <Tooltip placement="top" title={text}>
        <Button>Top</Button>
      </Tooltip>
      <Tooltip placement="topRight" title={text}>
        <Button>TR</Button>
      </Tooltip>
    </div>
    <div style={{ width: buttonWidth, float: 'left' }}>
      <Tooltip placement="leftTop" title={text}>
        <Button>LT</Button>
      </Tooltip>
      <Tooltip placement="left" title={text}>
        <Button>Left</Button>
      </Tooltip>
      <Tooltip placement="leftBottom" title={text}>
        <Button>LB</Button>
      </Tooltip>
    </div>
    <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
      <Tooltip placement="rightTop" title={text}>
        <Button>RT</Button>
      </Tooltip>
      <Tooltip placement="right" title={text}>
        <Button>Right</Button>
      </Tooltip>
      <Tooltip placement="rightBottom" title={text}>
        <Button>RB</Button>
      </Tooltip>
    </div>
    <div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
      <Tooltip placement="bottomLeft" title={text}>
        <Button>BL</Button>
      </Tooltip>
      <Tooltip placement="bottom" title={text}>
        <Button>Bottom</Button>
      </Tooltip>
      <Tooltip placement="bottomRight" title={text}>
        <Button>BR</Button>
      </Tooltip>
    </div>
  </div>
);

export default App;

We preset a series of colorful Tooltip styles for use in different situations.

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

const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime',
];
const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];

const App: React.FC = () => (
  <>
    <Divider orientation="left">Presets</Divider>
    <div>
      {colors.map(color => (
        <Tooltip title="prompt text" color={color} key={color}>
          <Button>{color}</Button>
        </Tooltip>
      ))}
    </div>
    <Divider orientation="left">Custom</Divider>
    <div>
      {customColors.map(color => (
        <Tooltip title="prompt text" color={color} key={color}>
          <Button>{color}</Button>
        </Tooltip>
      ))}
    </div>
  </>
);

export default App;
.ant-tag {
  margin-bottom: 8px;
}

API#

PropertyDescriptionTypeDefault
titleThe text shown in the tooltipReactNode | () => ReactNode-

Common API#

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

PropertyDescriptionTypeDefaultVersion
alignThis value will be merged into placement's config, please refer to the settings rc-tooltipobject-
arrowPointAtCenterWhether the arrow is pointed at the center of targetbooleanfalse
autoAdjustOverflowWhether to adjust popup placement automatically when popup is off screenbooleantrue
colorThe background colorstring-4.3.0
defaultVisibleWhether the floating tooltip card is visible by defaultbooleanfalse
destroyTooltipOnHideWhether destroy tooltip when hidden, parent container of tooltip will be destroyed when keepParent is falseboolean | { keepParent?: boolean }false
getPopupContainerThe DOM container of the tip, the default behavior is to create a div element in bodyfunction(triggerNode)() => document.body
mouseEnterDelayDelay in seconds, before tooltip is shown on mouse enternumber0.1
mouseLeaveDelayDelay in seconds, before tooltip is hidden on mouse leavenumber0.1
overlayClassNameClass name of the tooltip cardstring-
overlayStyleStyle of the tooltip cardobject-
overlayInnerStyleStyle of the tooltip inner contentobject-
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 mode. Could be multiple by passing an arrayhover | focus | click | contextMenu | Array<string>hover
visibleWhether the floating tooltip card is visible or notbooleanfalse
zIndexConfig z-index of Tooltipnumber-
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.