popover docs

2.21.0

Popover

A small overlay that opens on demand.

Published

History
View changes
Install
yarn add @bolt/components-popover
Source code
View on Github
Dependencies
@bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @popperjs/core mousetrap

Overview

Popover is part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

Install via NPM
npm install @bolt/components-popover
Overview Usage Schema Edit this page Testing Steps

Usage

{% include "@bolt-components-popover/popover.twig" with { trigger: "This is the popover trigger", content: "This is the popover content." } only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outer <bolt-popover> tag.

 object —
  • —
trigger

Renders the trigger of the popover. Usually a link or button is used.

 object —
  • —
content

Renders the content of the popover, which can be structured content that may contain calls to action.

 any —
  • —
placement

Sets the preferred placement of the popover. The actual placement of the popover will be automatically adjusted based on the space available on screen.

 string bottom
  • auto, top-start, top, top-end, left-start, left, left-end, right-start, right, right-end, bottom-start, bottom, bottom-end
spacing

Controls the spacing around the popover content.

 string small
  • none, xsmall, small, medium
theme

Applies a Bolt color theme to the bubble that contains the main Popover content.

 string none
  • none, xlight, light, dark, xdark
boundary

Optionally allows you to specify a parent element's CSS selector to use as an outer boundary when calculating placement.

 string —
  • —
fallbackPlacements

An array of different placement options that Popper.js should try if there isn't enough space for the ideal placement. Normally this defaults to all placement options however this lets you limit the options to pick from in certain situations.

 array —
  • —
uuid

Unique ID for popover, randomly generated if not provided.

 string —
  • —

popover

Close popover This is the content of the popover with a call to action. This triggers a popover

popover placement variations

Preferred placement
Close popover This is the content of the popover with a call to action. bottom-start Close popover This is the content of the popover with a call to action. bottom Close popover This is the content of the popover with a call to action. bottom-end
Close popover This is the content of the popover with a call to action. left-start
Close popover This is the content of the popover with a call to action. left
Close popover This is the content of the popover with a call to action. left-end
Close popover This is the content of the popover with a call to action. top-start Close popover This is the content of the popover with a call to action. top Close popover This is the content of the popover with a call to action. top-end Close popover This is the content of the popover with a call to action. right-start Close popover This is the content of the popover with a call to action. right Close popover This is the content of the popover with a call to action. right-end
Auto placement
Close popover This is the content of the popover with a call to action. Auto Close popover This is the content of the popover with a call to action. Auto Close popover This is the content of the popover with a call to action. Auto
Close popover This is the content of the popover with a call to action. Auto
Close popover This is the content of the popover with a call to action. Auto
Close popover This is the content of the popover with a call to action. Auto
Close popover This is the content of the popover with a call to action. Auto Close popover This is the content of the popover with a call to action. Auto Close popover This is the content of the popover with a call to action. Auto Close popover This is the content of the popover with a call to action. Auto Close popover This is the content of the popover with a call to action. Auto Close popover This is the content of the popover with a call to action. Auto

popover spacing variations

Content spacing Adjust the inset spacing of the content by using the spacing prop. Close popover This is the content of the popover with a call to action. spacing: none Close popover This is the content of the popover with a call to action. spacing: xsmall Close popover This is the content of the popover with a call to action. spacing: small Close popover This is the content of the popover with a call to action. spacing: medium

popover use case menu

Popover menu Create a popover menu by combining the Popover and Menu components. Close popover Choose one of these Menu item 1 Menu item 2 Menu item 2 Menu

popover theme variations

Content theme Adjust the Bolt color theme of the content by using the theme prop. Close popover This is the content of the popover with a call to action. theme: none Close popover This is the content of the popover with a call to action. theme: xlight Close popover This is the content of the popover with a call to action. theme: light Close popover This is the content of the popover with a call to action. theme: dark Close popover This is the content of the popover with a call to action. theme: xdark

popover with web component

Web Component Usage Bolt Popover is a web component, you can simply use <bolt-popover> in the markup to make it render.
This triggers a popover
Content This is the content of the popover with a call to action.
<bolt-popover> <bolt-button size="small"> This triggers a popover </bolt-button> <div slot="content"> <bolt-text headline font-size="small">Content</bolt-text> <bolt-text font-size="xsmall">This is the content of the popover with a <bolt-link url="https://pega.com">call to action</bolt-link>.</bolt-text> </div> </bolt-popover>
Prop Usage Configure the popover with the properties specified in the schema.
Popover Menu
Menu Item 1 Menu Item 2 Menu Item 3
<bolt-popover spacing="none" placement="top-start"> <bolt-button size="small"> Popover Menu </bolt-button> <div slot="content"> <bolt-menu> <bolt-menu-item> Menu Item 1 </bolt-menu-item> <bolt-menu-item> Menu Item 2 </bolt-menu-item> <bolt-menu-item> Menu Item 3 </bolt-menu-item> </bolt-menu> </div> </bolt-popover>
Debug Panel