SL Popover

Popover widget to show content in a styled popover element

1. Description

You can use this widget to render any content when interacting with the trigger. You can set the trigger on hover, left-click and right-click. When choosing right-click then the popover behaves like a context-menu and will position itself on the current mouse position. The widget will also work on mobile devices, the trigger will default to on-touch.

1.1 Browser example

Example 1	Example 2	Example 3

2. Usage

• Place any content in the trigger-container to trigger the content-container
• Place any content in the content-container

2.1 Modeler examples

Example 1	Example 2

2.2 Configuration example

3. Use Cases

• This can be used to create a context menu on a page when a user right-clicks an element.
• When you want to provide your users with more information about an item.
• This can be used with or without an context-object.

4. Customization

Avoid using margins/padding on the widget itself, if you want to add padding/margins place these on the elements inside the trigger and/or content-container. If the popover-content is visible the class is-active is applied to the trigger-container. For example, you can apply extra styling to elements inside the trigger whenever the content is triggered.