Popover

Example

<div id="container">
<vega-popover
    size="200"
    placement="left"
    alignment="start"
    position-relative-to="#container"
>
    <vega-button id="valid-btn" slot='popover-content'>Click Me</vega-button>
    <div slot='popover'>I am a popover
        <p>
        <img src="/icons/vega-logo-white.png">
        </p>
    </div>
</vega-popover>
</div>

Usage

Popovers are content-overlay windows which are comparable to tooltips. Unlike tooltips, which only allow text, popovers can accept a broader array of content, such as images or form elements.

Popovers contain a block of content, with a pointer which is directed to a clickable element.

Also, unlike tooltips, which may be triggered by mouseover events, popovers are only triggerable through onClick events.

Properties

Name	Description	Default
size	This specifies the size of the popover. The options can be set as a number or ResponsiveType. `{[key in default\\|S\\|M\\|L\\|XL]?: any number} \\| any number`	-
placement	Specifies where to display the popover in relation to its parent element. The default is ‘top’. Note: If there is not enough room to display the popover, it will auto adjust the position in the following order: ‘top’, ‘left’, ‘bottom’, ‘right’. `top` `left` `bottom` `right`	top
alignment	Specifies the alignment of the popover. The default is ‘center’. you can alter the placement to display ‘top-left’, ‘top-center’, ‘top-right’, ‘bottom-left’, ‘bottom-center’, ‘bottom-right’, ‘left-top’, ‘left-center’, ‘left-bottom’, ‘right-top’, ‘right-center’, ‘right-bottom’ `start` `center` `end`	center
position-relative-to	This is the selector for the element that will contain the popup. If not provided, the popup will be appended to the body. If you encounter a problem where the positioning scrolls, modify this property. string	-

Method

You may show or hide the popover element by using the following methods:

await document.getElementById('my-popover').show();
await document.getElementById('my-popover').hide();

Events

When the popover is set to show, the vegaPopoverShow event will be dispatched. When the popover is set to hide, the vegaPopoverHide event is dispatched.

React:

<VegaPopover
    vegaPopoverShow={ () => {} }
    vegaPopoverHide={ () => {} }
    ...
></VegaPopover>

Vue.js:

<vega-popover @vegapopovershow="method" @vegapopoverhide="method"></vega-popover>

Javascript:

document.getElementById("web-popover").addEventListener("vegaPopoverShow", () => {})
document.getElementById("web-popover").addEventListener("vegaPopoverHide", () => {})

Accessibility

Elements must only use allowed ARIA attributes
ARIA attributes must conform to valid values
ARIA attributes must conform to valid names
Buttons must have discernible text
Elements must have sufficient color contrast
id attribute value must be unique
Interactive controls must not be nested

Best Practices

Popovers behave similarly to modals, at least from a user perspective. It is best to avoid situations where we create a “modal over modal” type of experience. For this reason it is advisable to avoid using popovers within modals.
Popovers may be used together with form components such as pop-up menus. In this case they may help guide users through form submission.
Unlike modals, automatically save any work that is entered into a popover form element. Because of the fact that popovers can accidentally be closed by clicking anywhere else on the screen, discard user work only if they have explicitly told you to do so (e.g. through a cancel button).
Avoid using popovers to show warnings. In this case, it’s best to use page notifications.