Bolt Design System

Overview

A small overlay that opens on demand. Part of the collection of components, visual styles, and build tools that power the the Bolt Design System.

npm install @bolt/components-popover

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

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. Used to apply extra HTML attributes to the outer <bolt-popover> tag.	`object`	—	—
Trigger	Trigger of the popover.	`string` , `array` , `object`	—	—
Content	Content of the popover.	`string` , `array` , `object`	—	—
Placement	Preferred placement of the popover. The actual placement of the popover will be automatically adjusted based on the space available on screen.	`string`	`bottom-start`	`auto`, `top-start`, `top`, `top-end`, `left-start`, `left`, `left-end`, `right-start`, `right`, `right-end`, `bottom-start`, `bottom`, `bottom-end`
Spacing	The spacing around the popover content.	`string`	`none`	`none`, `xsmall`, `small`, `medium`
Nowrap	Stops the text in the content to wrap to a second line.	`boolean`	`false`	—
Uuid	Unique ID for popover, randomly generated if not provided.	`string`	—	—