| Name | Type | Description | Default |
|---|---|---|---|
| actionToOpen | 'click' | 'hover' | Action that triggers the popover to open. | 'click' |
| align | 'start' | 'center' | 'end' | Alignment of the popover relative to the trigger element. | 'center' |
| asChild | boolean | Set to true if child controls the events. It will render the child directly without wrapping it. | - |
Required children | React.ReactNode | Element that triggers the popover and works as the anchor. | - |
| hasTip | boolean | Whether the popover should display a tip (arrow). | false |
| isOpen | boolean | Controlled open state of the popover. If it is left undefined, it will be uncontrolled. | - |
| offset | number | Distance in pixels from the trigger element to the popover. | 4 |
| onClose | () => void | Callback function when the popover is opened. Used only in controlled mode and if the trigger lacks the events to manage the controlled behavior. | - |
| onOpen | () => void | Callback function when the popover is closed. | - |
Required popoverContent | React.ReactNode | Content to be displayed inside the popover. | - |
| side | 'top' | 'bottom' | 'left' | 'right' | Side of the trigger where the popover will appear. | 'bottom' |
() => { return ( <DxcContainer height="100px" padding="var(--spacing-padding-m)" boxSizing="border-box"> <DxcPopover actionToOpen="hover" popoverContent={<DxcParagraph>Popover content.</DxcParagraph>}> <DxcParagraph>Hover me to see the popover.</DxcParagraph> </DxcPopover> </DxcContainer> ); }
() => { const [isOpen, setIsOpen] = useState(false); return ( <DxcContainer height="100px" padding="var(--spacing-padding-m)" boxSizing="border-box"> <DxcPopover isOpen={isOpen} onOpen={() => setIsOpen(true)} onClose={() => setIsOpen(false)} popoverContent={<DxcParagraph>Popover content.</DxcParagraph>} > <DxcParagraph>Click me to see the popover.</DxcParagraph> </DxcPopover> </DxcContainer> ); }