Popover

A small overlay that opens on demand.

Published Last updated: 5.5.0 Change log Github NPM
Twig 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
trigger_event

Controls the event that triggers the popover to show.

string click
  • click or hover
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 xlight
  • 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 Install
npm install @bolt/components-popover
Dependencies @bolt/components-button @bolt/components-link @bolt/components-trigger @bolt/core-v3.x @bolt/lazy-queue