Tooltips

Tooltip 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 tooltips on. There, we can select 'Bootstrap tooltip' checkbox and press 'Save' button.

Plugins Tooltips Enable

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

Note: When uninstalling Paragraphs Collection Bootstrap module, be sure to disable tooltip 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 Tooltips behavior plugin we deliver variety of options to customize our tooltips paragraph type. Lists of available options consists of: - Content (Content to be used for the tooltip) - Animation (Applies a CSS fade transition to the tooltip) - Container (Appends the tooltip to a specific HTML element of its parent paragraph) - Delay (Delay showing and hiding the popover) - Placement (How to position the tooltip) - Focus trigger (How tooltip is triggered) - Offset (Offset of the tooltip relative to its target)

Plugins Tooltips Behavior

Content

Basically, this is what tooltip will display. We use simple text editor to enter text content that will show when tooltip appears.

Animation

Apply a CSS fade transition to the tooltip.

Container

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

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 tooltip 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 tooptip to appear. We can choose multiple triggers, "manual" cannot be combined with any other trigger. - Click (Triggers tooltip by clicking on a element) - Hover (Triggers tooltip when hovering over a element) - Focus (Hides tooltip when mouse focus over a element is lost) - Manual (This one is left for developers)

Offset

Offset of the tooltip 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 tooltip move from the center. In our case that's 20 pixels up and 50 pixel on the left.

Example

Plugins Tooltips Show

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