2.15.2

Popover

A small overlay that opens on demand.

Published

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

Overview

Usage

Schema

Edit this page

Testing Steps

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