Create buttons with mini, popup modals to convey information to your visitors using the stylish Popover stack.
Below we’ve included a few examples of the Popover stack, with various orientations and button stylings, inside of a Columns stack.
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.
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.
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.
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.
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.