Popovers / Tooltips

Build custom popovers and tooltips. Supports nesting elements inside, being used inside of query loops and is out of the box responsive and accessible.

Overview

The popover element can be used in a few different ways, to cover many use cases.

Out of the box it consists of two parts, the ‘button’ or ‘marker’ which is the element that the user would interact with either by hovering/clicking or by keyboard (for eg see the green icons above in the image) and then the popover content, which is the content that pops up. Any elements can be nested inside of the popover content and can be used with dynamic data.

There’s also the option to use to add as tooltips, to any other elements on the page. This is for when you want the user to interact with other elements on the page, not the built-in button, for the popover to appear. See the ‘advanced’ settings.

Popover Content

The typography, colors, shadows, etc can all be styled from the popover content tab in the settings. If you’re nesting elements inside, then you are free to style each element however you like using the relevant style settings for that element.

Behaviour

Preferred Popup Placement – By default, the popup will appear where it has room to do so, the auto setting will ensure that across different devices there is always space. However, if you need to force it into a certain direction you can do with this setting.

User Interaction to Open – ‘Click’ ensures a click and tap will open the popup. If you’re wanting to open on hover, use ‘mouseenter click’, this way on desktop the hover will trigger it, but on mobile the user can still tap to open.

Offset Skidding – Change the position of the popover along the side of the element in which it will appear.

Offset Distance – Add spacing between the edge of the element and the popover position

Animation

Set the starting position of the popover to control the reveal animation. By default the starting position is translateY of 10px and a scale of 0.95. This means the popover scales up and moves slightly upwards when revealed.

---

Tooltips

I’d recommend using the built-in button where possible, to open up the popover, as you then have the done-for-you accessibility and it’s relatively easy to get set up.

However, you can also use the element to dynamically add tooltips to other buttons/links etc on the page. Here you enable tooltip mode and then provide the selector of the elements on the page that should have a tooltip.

Use as tooltip – Set element to ‘tooltip’ mode, meaning it will be looking for other elements on the page for the user to interact with.

Element selector – Add the selector for the element(s) to be interacted with to show a tooltip. If wishing to use on multiple elements, the simplest way is to use a class, and add the same class to multiple elements.

Hide button in builder – Even with tooltip mode enabled, the button remains visible in the builder just so you can click it to style the popover content or add in new elements. Once you’ve set things up, you may wish to hide the button so it matches the front end (where there’s no button).

Tooltip Content

Dynamic tooltip text – If you’re wishing to add tooltips to multiple elements, to make each element have it’s own individual tooltip content, enable this setting and then head to your chosen element’s ‘Tooltip’ setting (in the style tab) to add content for that element specifically..

For example.. here we’re adding some manual content to a button element in the settings (making sure the button has the class to match the ‘element selector’ from the tooltip settings)

The result is that our styled popover element is then being used as the tooltip for that button element. All the styling will be inherited for any elements that you add tooltips to.