Popup

const popup = window.e.utils.createPopup(
  openerElement, // HTMLElement to attach the popup to
  contentElement, // HTMLElement that is the content of the popup
  {
    placement: 'bottom', // Where to try to open content in relation to opener
    arrow: true, // Toggles arrow rendering
    offset: 12, // Determines distance between reference and content
    noPadding: false, // Disables padding on popup
    closeOnOutsideClick: true, // Closes on clicking anywhere but on the content
    closeOnEscPress: true, // Closes by pressing ESC key
    elementToFocusOnOpen: null, // Determines to which HTMLElement should be in focus after open
    elementToFocusOnClose: opener, // Determines to which HTMLElement should be in focus after close
    loopFocus: false, // Makes focus to jump back to the start instead of closing the popup
    matchOpenerWidth: false, // Sets the width of contentElement to the same as openerElement dynamically
    type: '', // Sets the type of the popup (info, warning, success, error)
    onBeforeOpen: (opener, content) => {}, // Function to run before internal open logic
    onAfterOpen: (opener, content) => {}, // Function to run after internal open logic
    onBeforeClose: (opener, content) => {}, // Function to run before internal close logic
    onAfterClose: (opener, content) => {}, // Function to run after internal close logic
    onOutsideClickClose: (opener, content) => {}, // Function to run after the popup was closed by clicking outside
    onEscPressClose: (opener, content) => {}, // Function to run after the popup was closed by an escape press
    onFocusOutForward: (opener, content) => {}, // Function to run if the popup is closed by forward tabbing
    onFocusOutBackward: (opener, content) => {} // Function to run if the popup is closed by backward tabbing
  }
);

popup.open({ preventAutoFocus: false }); // Shows the popup
popup.close({ preventAutoFocus: false }); // Hides the popup
popup.toggle({ preventAutoFocus: false }); // Hide if shown and show if hidden