components/popover/index.en-US.md
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.
<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/arrow-point-at-center.tsx" debug>Arrow.pointAtCenter</code> <code src="./demo/shift.tsx" iframe="300">Auto Shift</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/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/wireframe.tsx" debug>Wireframe</code> <code src="./demo/component-token.tsx" debug>Component Token</code>
Common props ref：Common props
| Property | 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> | - |
<embed src="../tooltip/shared/sharedProps.en-US.md"></embed>
Please ensure that the child node of Popover accepts onMouseEnter, onMouseLeave, onFocus, onClick events.
<code src="./demo/_semantic.tsx" simplify="true"></code>
<ComponentTokenTable component="Popover"></ComponentTokenTable>
<embed src="../tooltip/shared/sharedFAQ.en-US.md"></embed>
For more questions, please refer to Tooltip FAQ.