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.

Basic

The simplest usage.

TypeScript
JavaScript
import { Tooltip } from 'infrad';
import React from 'react';

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

export default App;

Arrow pointing at the center

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

TypeScript
JavaScript
import { Button, Tooltip } from 'infrad';
import React from 'react';

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;

Placement

There are 12 placement options available.

TypeScript
JavaScript
import { Button, Tooltip } from 'infrad';
import React from 'react';

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;

Presets

Custom

Colorful Tooltip

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

TypeScript
JavaScript
import { Button, Divider, Tooltip } from 'infrad';
import React from 'react';

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#

Property	Description	Type	Default
title	The text shown in the tooltip	ReactNode \| () => ReactNode	-

Common API#

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

Property	Description	Type	Default	Version
align	This value will be merged into placement's config, please refer to the settings rc-tooltip	object	-
arrowPointAtCenter	Whether the arrow is pointed at the center of target	boolean	false
autoAdjustOverflow	Whether to adjust popup placement automatically when popup is off screen	boolean	true
color	The background color	string	-	4.3.0
defaultVisible	Whether the floating tooltip card is visible by default	boolean	false
destroyTooltipOnHide	Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false	boolean \| { keepParent?: boolean }	false
getPopupContainer	The DOM container of the tip, the default behavior is to create a `div` element in `body`	function(triggerNode)	() => document.body
mouseEnterDelay	Delay in seconds, before tooltip is shown on mouse enter	number	0.1
mouseLeaveDelay	Delay in seconds, before tooltip is hidden on mouse leave	number	0.1
overlayClassName	Class name of the tooltip card	string	-
overlayStyle	Style of the tooltip card	object	-
overlayInnerStyle	Style of the tooltip inner content	object	-
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`
trigger	Tooltip trigger mode. Could be multiple by passing an array	`hover` \| `focus` \| `click` \| `contextMenu` \| Array<string>	`hover`
visible	Whether the floating tooltip card is visible or not	boolean	false
zIndex	Config `z-index` of Tooltip	number	-
onVisibleChange	Callback 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.