mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-18 08:00:53 +08:00
c3c5e4dce9
* refactor: deprecated destroyTooltipOnHide API * demo: demo update * demo: demo update * demo: demo update * fix: fix --------- Co-authored-by: Jianan Li <jianan@orderly.network>
2.7 KiB
2.7 KiB
| category | group | title | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|
| Components | Data Display | Tooltip | Simple text popup box. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*9LKlRbWytugAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bCbPTJ7LQngAAAAAAAAAAAAADrJ8AQ/original |
|
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 htmltitleattribute.
Examples
Basic
Placement
Arrow
Auto Shift
Adjust placement automatically
Destroy tooltip when hidden
Colorful Tooltip
_InternalPanelDoNotUseOrYouWillBeFired
Debug
Disabled
Disabled children
Wrap custom component
API
Common props ref：Common props
| Property | Description | Type | Default |
|---|---|---|---|
| title | The text shown in the tooltip | ReactNode | () => ReactNode | - |
Common API
Semantic DOM
Design Token
FAQ
Why Tooltip not update content when close?
Tooltip will cache content when it is closed to avoid flicker when content is updated:
// `title` will not blink when `user` is empty
<Tooltip open={user} title={user?.name} />
If need update content when close, you can set fresh property (#44830):
<Tooltip open={user} title={user?.name} fresh />
