{% include "@bolt-components-popover/popover.twig" with {
trigger: "This is the popover trigger",
content: "This is the popover content."
} only %}
| 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
|
|
|
spacing
|
Controls the spacing around the popover content. |
string
|
small
|
|
|
theme
|
Applies a Bolt color theme to the bubble that contains the main Popover content. |
string
|
none
|
|
|
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
| — |
|
npm install @bolt/components-popover