Popover

Popover can be used to provide an extra information that contain a call to action or link

Code


                                                        
                                                        
                                                            <PyxisPopover 
                                                            popover-id="popover-id"
                                                            data-testid="popover-data-testid"
                                                            content-text="Content text"
                                                            title="Title"
                                                            direction="center-right"
                                                        >
                                                             <button>Hover me !</button>
                                                        </PyxisPopover>

Example of a regular Popover component

Props

The Popover component supports the following Props:

Name	Type	Default	Required
title	string	undefined	true
contentText	string	undefined	true
dataTestid	string	undefined	true
popoverId	string	undefined	true
direction	top-left\|top-center\|top-right\|center-left\|center-right\|bottom-left\|bottom-center\|bottom-right	top-center	true
autoDirection	boolean	true	false
disabled	boolean	false	false
ariaLabel	string	undefined	false
spacing	number	4	false
iconProps	{ iconClass: string color?: 'primary'\|'secondary'\|'warning'\|'danger'\|'success'\|'premium'\|'earth'\|'neptune'\|'jupiter'\|'cloudy'\|'system'\|'neutral'\|'brand' }	undefined	false
linkProps	{ label: string route: RouteLocationRaw targetBlank?: boolean }	undefined	false
primaryButtonLabel	string	undefined	false
secondaryButtonLabel	string	undefined	false
openOn	'hover'\|'click'	'hover'	false

Events

The interactions on the Popover component are handled by the following Events

@click-primary : This event is triggered when the primary button is clicked

@click-secondary : This event is triggered when the secondary button is clicked

@close : This event is triggered when the popover closes

@open : This event is triggered when the popover opens

Slots

The Popover component offers the following slots for managing its template content:

v-slot:default : This slot is used to define the element that triggers the display of the content when hovered over.

Exposed Functions

openPopover() : force popover opening from parent component

closePopover() : force popover closing from parent component