Popover

Potion Pack addon stack

Create buttons with mini, popup modals to convey information to your visitors using the stylish Popover stack.

  • Stylish informational text-based popovers
  • Style button to match your site design
  • Align toggle button to the left, center or right
  • Orient popover to work with your content
  • Clicking button toggle the visibility of the Popover

Example

Below we’ve included a few examples of the Popover stack, with various orientations and button stylings, inside of a Columns stack.


Using Popover

General

Dark Mode
When enabled you'll be given additional options throughout the Popover stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

Popover

Title
This is the text that will appear at the top of your Popover. It acts as the header for your Popover content.

Content
This is the main text of your Popover. The message, instructions, information, etc you wish to covey to the visitor when they click on the Popover toggle button.

Position
Allows you to determine which direction, in relation to your toggle button, that your Popover will appear.

Fade In Animation
When enabled the popover will use a fade in animation to present itself.

Drop Shadow
When enabled a drop shadow will be added to your popover. You're able to adjust the size and color of this drop shadow.

Custom Colors

Enable Custom Colors
Enabling this feature allows you to apply custom colors for the Container, Header and Content of the popover. If Dark Mode is enabled you'll also have the option of setting alternate colors.

Button

Trigger
Allows you to choose whether the popover will be displayed when the visitor clicks the button or when the visitor hovers over the button.

Button Text

The text that will appear on the button that triggers your Popover

Alignment
Allows you to set the justification of the Button itself. You can set the alignment to Left, Center or Right.

Button Size
Choose the size of your button. You can opt of a Small, Standard or Large button size.

Button Style
Set the color of the button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Block Button
Enable to make the button span the entire width of its parent stack. The button’s width is flexible when enabled and will size down to fit the available space.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Insight
Custom Colors

Enabling custom colors not only allows you to customize the look of the popover, but also gives you access to Dark Mode color pickers for these color options.