{% 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
|
|
trigger_event
|
Controls the event that triggers the popover to show. |
string
|
click
|
|
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. Note: the values xlight, light, dark, xdark, xxdark are deprecated. |
string
|
white
|
|
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
{% set trigger %}
{% include '@bolt-elements-button/button.twig' with {
content: 'This triggers a popover',
attributes: {
type: 'button'
}
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: 'This is the content of the popover.',
} only %}
<bolt-popover spacing="medium">
<button type="button" class="e-bolt-button">
This triggers a popover
</button>
<div slot="content">
This is the content of the popover.
</div>
</bolt-popover>
placement
prop. It can be set to a specific placement or automatically calculated. It is recommended to use the boundary
prop in tandem with auto placement. This ensures that the auto placement will happen within a specific container instead of the entire page. The boundary
prop accepts all selector names (eg: .class, #id, and [attribute]).
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
placement: 'auto',
boundary: '.js-target-container'
} only %}
<bolt-popover placement="auto" boundary=".js-target-container">
<button type="button" class="e-bolt-button">
This triggers a popover
</button>
<div slot="content">
This is the content of the popover.
</div>
</bolt-popover>
spacing
prop.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
spacing: 'medium',
} only %}
<bolt-popover spacing="medium">
<button type="button" class="e-bolt-button">
This triggers a popover
</button>
<div slot="content">
This is the content of the popover.
</div>
</bolt-popover>
--c-bolt-popover-bubble-width
CSS custom property via inline style.
This Is an Eyebrow
This is a paragraph.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
attributes: {
style: '--c-bolt-popover-bubble-width: min(80vw, 500px);'
},
} only %}
<bolt-popover style="--c-bolt-popover-bubble-width: min(80vw, 500px);">
<button type="button" class="e-bolt-button">
This triggers a popover
</button>
<div slot="content">
This is the content of the popover.
</div>
</bolt-popover>
theme
prop.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
content: content,
theme: 'navy',
} only %}
<bolt-popover theme="navy">
<button type="button" class="e-bolt-button">
This triggers a popover
</button>
<div slot="content">
This is the content of the popover.
</div>
</bolt-popover>
trigger_event
prop.
{% include '@bolt-components-popover/popover.twig' with {
trigger: trigger,
trigger_event: 'hover', // Default is 'click'.
content: content,
} only %}
<bolt-popover spacing="medium" trigger-event="hover">
<button type="button" class="e-bolt-button">
This triggers a popover
</button>
<div slot="content">
This is the content of the popover.
</div>
</bolt-popover>