4dbb0075bb
* docs: split shardProps * chore: update english * chore: update style * chore: update snap
3.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
API
Common props ref：Common props
| Property | Description | Type | Default |
|---|---|---|---|
| title | The text shown in the tooltip | ReactNode | () => ReactNode | - |
Common API
Design Token
FAQ
Why does the warning findDOMNode is deprecated sometimes appear in strict mode?
This is due to the implementation of rc-trigger. rc-trigger forces children to accept ref, otherwise it will fall back to findDOMNode, so children need to be native html tags. If not, you need to use React.forwardRef transparently passes ref to native html tags.
findDOMNode is deprecatedreproduce: https://codesandbox.io/p/sandbox/finddomnode-c5hy96- Using
forwardRefto fix: https://codesandbox.io/p/sandbox/no-finddomnode-warning-forked-gdxczs
Why sometime not work on HOC?
Please ensure that the child node of Tooltip accepts onMouseEnter, onMouseLeave, onPointerEnter, onPointerLeave, onFocus, onClick events.
What's the placement logic?
It will follow placement config when screen has enough space. And flip when space is not enough (Such as top to bottom or topLeft to bottomLeft). Single direction such as top bottom left right will auto shift on the view:
When placement is set to edge align such as topLeft bottomRight, it will only do flip but not do shift.
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 />
