mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
8b3868ac63
* feat: tooltip support arrow props * docs: update docs * chore: update rc-tooltip version * feat: update snapshots * feat: update snapshots * style: format code * Update components/tooltip/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/index.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/demo/arrow.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/demo/arrow.md Co-authored-by: MadCcc <1075746765@qq.com> * feat: code optimize * docs: update docs * feat: code optimize * feat: del doc * feat: update snapshots * feat: update snapshots * feat: update snapshots * feat: refactor dropdown arrow style * feat: comment * Update components/tooltip/demo/arrow.tsx Co-authored-by: MadCcc <1075746765@qq.com> * feat: popover support arrow prop * feat: tour arrow style optimize * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: update test case * feat: update test case * feat: update test case * Update components/popover/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/index.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code Co-authored-by: MadCcc <1075746765@qq.com>
42 lines
1.5 KiB
Markdown
42 lines
1.5 KiB
Markdown
---
|
|
category: Components
|
|
group: Data Display
|
|
title: Popover
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XhL3QpRw92kAAAAAAAAAAAAADrJ8AQ/original
|
|
demo:
|
|
cols: 2
|
|
---
|
|
|
|
The floating card popped by clicking or hovering.
|
|
|
|
## 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
|
|
|
|
<!-- prettier-ignore -->
|
|
<code src="./demo/basic.tsx">Basic</code>
|
|
<code src="./demo/triggerType.tsx">Three ways to trigger</code>
|
|
<code src="./demo/placement.tsx">Placement</code>
|
|
<code src="./demo/arrow.tsx">Arrow</code>
|
|
<code src="./demo/control.tsx">Controlling the close of the dialog</code>
|
|
<code src="./demo/hover-with-click.tsx">Hover with click popover</code>
|
|
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
|
<code src="./demo/wireframe.tsx" debug>Wireframe</code>
|
|
|
|
## API
|
|
|
|
| Param | Description | Type | Default value | Version |
|
|
| ------- | ------------------- | ---------------------------- | ------------- | ------- |
|
|
| content | Content of the card | ReactNode \| () => ReactNode | - | |
|
|
| title | Title of the card | ReactNode \| () => ReactNode | - | |
|
|
|
|
Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
|
|
|
|
## Note
|
|
|
|
Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
|