ant-design/components/tooltip/index.en-US.md
𝑾𝒖𝒙𝒉 4dbb0075bb
docs(shared): Improve shared API docs ()
* docs: split shardProps

* chore: update english

* chore: update style

* chore: update snap
2024-12-02 23:03:44 +08:00

3.7 KiB
Raw Blame History

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
cols
2

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

Basic Placement Arrow Auto Shift Adjust placement automatically Destroy tooltip when hidden Colorful Tooltip _InternalPanelDoNotUseOrYouWillBeFired Debug Disabled Disabled children

API

Common props refCommon 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.

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:

shift

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} />
no blink

If need update content when close, you can set fresh property (#44830):

<Tooltip open={user} title={user?.name} fresh />
no blink