Popover

The Popover template enables you to easily display content in a popup near any HTML element on your page. The template itself contains 5 positions where you can add fields in order to configure your popups. 

Fields:

Heading - the fields' contents in this position will show in the heading part of the popup

Body - the fields' contents in this position will show in the body of the popup

Selector - this is where you put the html selector that should be used for the popover. For example "#div-id" will load a popover near the HTML element with the ID "div-id", ".div-class" will load a popover near the HTML element with a class "div-class". 

Placement - There are 5 permitted values for a field in this position: auto, top, bottom, left or right. We suggest making a Simple Select field and assigning it to this position to ensure these values are the only values that can be entered.

Trigger - There are 3 permitted values for the trigger of the popover: click, focus or hover. Similar to the placement position, we suggest adding these values to a Simple Select field and assigning it here.

Display:

Displaying your popover content is done through the placement of a SEBLOD List module of your Popover List & Search type on the pages you want the popovers to display on. Without this module on the page, your popups will not display.