Bolt Design System

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

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`
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

Published

Overview

Install via NPM

Usage

Schema