Popovers

Popover behavior plugin does not come with its corresponding paragraph type. Instead, this behavior plugin is applied to other paragraph types. To enable them, we have to go to paragraphs type administration page and open edit page of a paragraph type we plan to use popovers on. There, we can select 'Bootstrap popover' checkbox and press 'Save' button.

Plugins Popover Enable

Note: Behavior plugins are only supported by the EXPERIMENTAL paragraphs widget.

Note: When uninstalling Paragraphs Collection Bootstrap module, be sure to disable popover plugins on all paragraph types you were using it on. If you don't, there is a risk of deleting all paragraph types using this plugin.

With Popovers behavior plugin we deliver variety of options to customize our popovers paragraph type. Lists of available options are: - Animation (Applies a CSS fade transition to the popover) - Popover content (A paragraph to be used as popover content) - Container (Appends the popover to a specific HTML element of its parent paragraph) - Delay (Delay showing and hiding the popover) - Placement (How to position the popover) - Focus trigger (How popover is triggered) - Offset (Offset of the popover relative to its target)

Plugins Popovers Behavior

Animation

Apply a CSS fade transition to the popover.

Container

This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

Popover content

A paragraph to be used as popover content. If you don't see the paragraph you want to reference in the dropdown selector, then try to save that paragraph first.

Delay

Delays showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide and show.

Placement

You can choose how to position the popover on an element in the following manners: - Top (Above element) - Bottom (Bellow element) - Left (Left from element) - Right (Right from element)

Focus trigger

Choose what trigger to use for the popover to appear. We can choose multiple triggers, "manual" cannot be combined with any other trigger. - Click (Triggers popover by clicking on a element) - Hover (Triggers popover when hovering over a element) - Focus (Hides popover when mouse focus over a element is lost) - Manual (This one is left for developers)

Offset

Offset of the popover relative to its target. In the text field enter two numbers divided with simple space, for example '20 50'. First number represents X and second is Y, while number itself indicates how many pixels should popover move from the center. In our case that's 20 pixels up and 50 pixel on the left.

Example

Plugins Popover Page

Both popovers are set to show when clicked on their respective elements, so there are to popovers shown at the same time.