Bolt Design System

Twig Usage

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

Schema

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

Install

  npm install @bolt/components-popover

Dependencies

@bolt/components-button

@bolt/components-link

@bolt/components-trigger

@bolt/core-v3.x

@bolt/lazy-queue

@popperjs/core

mousetrap

Popover

A small overlay that opens on demand.