ant-design/components/tooltip/index.en-US.md

---
category: Components
type: Data Display
title: 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`.

## 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.
docs: translation tooltip (#2577) 2016-08-02 16:06:46 +08:00			`---`
			`category: Components`
docs: 调整组件导航结构 (#3758) - Layout 更名为 Grid 2016-11-09 14:43:32 +08:00			`type: Data Display`
docs: translation tooltip (#2577) 2016-08-02 16:06:46 +08:00			`title: Tooltip`
			`---`

			`A simple text popup tip.`

			`## When To Use`

docs: Add note to Popconfirm, Popover and tooltip about child node. Related issue: #4672 2017-01-22 14:26:46 +08:00			`- The tip shows while mouse enter, and hides while mouse leave. The Tooltip doesn't support complex text and operation.`
docs: improve docs' detail (#4050) 2016-11-29 17:13:24 +08:00			- It can provide an explanation of `button/text/operation` that can cover the usage of the default system `title`.
docs: translation tooltip (#2577) 2016-08-02 16:06:46 +08:00
			`## API`

			`\| Property \| Description \| Type \| Default \|`
			`\|-----------\|------------------------------------------\|------------\|--------\|`
			`\| title \| prompt text \| string/React.Element \| - \|`
docs: update docs for Tooltip Popconfirm Popover 2016-12-22 12:00:57 +08:00
			`### 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 \|
chore: add alias for getTooltipContainer 2016-12-22 12:08:17 +08:00			\| 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 \|
docs: Unify type naming (#4636) * Unify name of ReactNode type in document * Lowser all string type name * Lowercase all number type name * Lowercase all boolean type name * Unify array type * Lowercase all object type name * Unify mutilple types 2017-01-20 20:10:50 +08:00			\| arrowPointAtCenter \| whether arrow pointed at the center of target, supported after `antd@1.11+` \| boolean \| `false` \|
docs: update docs for Tooltip Popconfirm Popover 2016-12-22 12:00:57 +08:00			`\| visible \| make the float card visible or not \| boolean \| false \|`
chore: add alias for getTooltipContainer 2016-12-22 12:08:17 +08:00			`\| onVisibleChange \| callback of the visible attribute changed \| (visible) => void \| none \|`
docs: update docs for Tooltip, close: #4724 2017-01-26 10:56:24 +08:00			`\| 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 \|`
docs: update docs for Tooltip Popconfirm Popover 2016-12-22 12:00:57 +08:00			`\| 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 \|`
docs: Add note to Popconfirm, Popover and tooltip about child node. Related issue: #4672 2017-01-22 14:26:46 +08:00

			`## Note`

docs: Oops, no onHover event. 2017-01-22 15:05:32 +08:00			Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` event.