mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
e7303f39fd
* feat(tooltip): Support better customization with semantic classNames/styles as function * test: update test and snap * feat: add popover and popconfirm * test: update demo and snap * chore: empty commit (add co-author) Co-authored-by: lijianan <574980606@qq.com> * update type * Apply suggestion from @li-jia-nan Signed-off-by: lijianan <574980606@qq.com> * Apply suggestion from @li-jia-nan Signed-off-by: lijianan <574980606@qq.com> * update snap * update docs * Refactor TooltipProps interface for clarity Signed-off-by: lijianan <574980606@qq.com> * chore: update demo style * chore: tmp of it * chore: update doc * chore: str * docs: update demo * docs: update demo * ts: clean up --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: thinkasany <480968828@qq.com> Co-authored-by: 二货机器人 <smith3816@gmail.com>
2.6 KiB
2.6 KiB
category, group, title, description, cover, coverDark, demo
| category | group | title | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|
| Components | Data Display | Popover | The floating card pops up when clicking/mouse hovering over an element. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kfW5RrfF4L8AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6b8fSKVVtXIAAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
A simple popup menu to provide extra information or operations.
Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.
Examples
Basic
Three ways to trigger
Placement
Arrow
Arrow.pointAtCenter
Auto Shift
Controlling the close of the dialog
Hover with click popover
Custom semantic dom styling
_InternalPanelDoNotUseOrYouWillBeFired
Wireframe
Component Token
API
Common props ref：Common props
| Param | Description | Type | Default value | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| content | Content of the card | ReactNode | () => ReactNode | - | |
| title | Title of the card | ReactNode | () => ReactNode | - | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - |
Note
Please ensure that the child node of Popover accepts onMouseEnter, onMouseLeave, onFocus, onClick events.
Semantic DOM
Design Token
FAQ
For more questions, please refer to Tooltip FAQ.