mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
7da2f1fb8d
* Add FAQ entry for Toolkit + custom component * Add tooltip example for custom component * Add link to example in Tooltip doc page * Add link to issue Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: Dan M. <danspamable@gmail.com> * Replace custom props with HTMLSpanElement props Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: Dan M. <danspamable@gmail.com> * Import handlers as types Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: Dan M. <danspamable@gmail.com> * Fix formatting Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: Dan M. <danspamable@gmail.com> * Update components/tooltip/demo/wrap-custom-component.tsx Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: Dan M. <danspamable@gmail.com> * Update components/tooltip/index.en-US.md Co-authored-by: afc163 <afc163@gmail.com> Signed-off-by: Dan M. <danspamable@gmail.com> * Add link for Wrap Custom Component * Update components/tooltip/demo/wrap-custom-component.tsx Signed-off-by: thinkasany <480968828@qq.com> * test: update snap * fix md lint * chore: update docs --------- Signed-off-by: Dan M. <danspamable@gmail.com> Signed-off-by: thinkasany <480968828@qq.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: thinkasany <480968828@qq.com> Co-authored-by: 𝑾𝒖𝒙𝒉 <wxh1220@gmail.com>
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 />
