Interface PopupConfig

interface PopupConfig {
    autoClose?: boolean;
    className?: string | string[];
    closeButton?: boolean;
    id?: string;
    position?:
        | "auto"
        | Offset
        | "left-left"
        | "left-top"
        | "left-bottom"
        | "left-right"
        | "top-left"
        | "top-top"
        | "top-bottom"
        | "top-right"
        | "bottom-left"
        | "bottom-top"
        | "bottom-bottom"
        | "bottom-right"
        | "right-left"
        | "right-top"
        | "right-bottom"
        | "right-right";
    triggers?: Element[]
    | Map<Element, null | OpenableTriggerConfig>;
}

Properties

autoClose?: boolean

Automatically close the popup when clicking outside it or pressing Escape. Furthermore, if any trigger opens the widget on OpenableTriggerConfig.hover, the widget will be closed when the pointer leaves both the trigger and the root.

true
className?: string | string[]

Class name(s) or a list of class names of the popup. Will result in the top-level root element that's created by us getting these classes.

undefined
closeButton?: boolean

Add a close button at the top right.

false
id?: string

The DOM ID of the popup. Will result in the top-level root element that's created by us getting this ID.

Note, this does not replace or affect the data-lisn-popup-content-id attribute used to link triggers to the popup.

undefined
position?:
    | "auto"
    | Offset
    | "left-left"
    | "left-top"
    | "left-bottom"
    | "left-right"
    | "top-left"
    | "top-top"
    | "top-bottom"
    | "top-right"
    | "bottom-left"
    | "bottom-top"
    | "bottom-bottom"
    | "bottom-right"
    | "right-left"
    | "right-top"
    | "right-bottom"
    | "right-right"

Specify the popup position relative to its container. Supported positions include "top", "bottom", "left", "right" (which result on the popup being placed on top, bottom, etc, but center-aligned), or "top-left", "left-top", etc, as well as "auto". If set to "auto", then popup position will be based on the container position within the viewport at the time it's open.

"auto"
triggers?: Element[] | Map<Element, null | OpenableTriggerConfig>

The elements that open the widget when clicked on. You can also pass a map whose keys are the elements and values are OpenableTriggerConfig objects.

If not given, then the elements that will be used as triggers are discovered in the following way:

  1. If the content element has a data-lisn-popup-content-id attribute, then it must be a unique (for the current page) ID. In this case, the trigger elements will be any element in the document that has a lisn-popup-trigger class or data-lisn-popup-trigger attribute and the same data-lisn-popup-content-id attribute.
  2. Otherwise, the closest ancestor that has a lisn-popup-container class, or if no such ancestor then the immediate parent of the content element, is searched for any elements that have a lisn-popup-trigger class or data-lisn-popup-trigger attribute and that do not have a data-lisn-popup-content-id attribute, and that are not children of the content element.
undefined