SL - Popover

Content Type: Widget
Categories: User Interface

Overview

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.

Documentation

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 1Example 2Example 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 1Example 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.

Releases

Version: 1.0.1
Framework Version: 9.0.5
Release Notes: Bugfixes for popover widget
Version: 1.0.0
Framework Version: 9.0.5
Release Notes: Initial release