popover docs

Popover

A small overlay that opens on demand.

Published Last updated: 4.4.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

popover

Basic Popover Popover usually contains a small piece of structured content that may have calls to action. For rendering more complex layouts, please consider using the modal component instead. As for simple text or phrases, please consider using the tooltip component. Demo This is the content of the popover with a call to action .
Twig
{% 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 %}
HTML
<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>

popover placement variations

Popover Placement and Boundary Adjust the placement of the content by using the 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]). Demo Auto placement with a boundary (recommended): The following container has the .js-bolt-popover-boundary class and the popover’s boundary prop is set to said class. The popover’s auto placement will always appear within the container.
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
Specific placement: When setting a specific placement, it will ignore the boundary prop and always render the placement stated. This feature will cause undesired overflow issues in smaller screens, use with caution. This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action .
This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  content: content,
  placement: 'auto',
  boundary: '.js-target-container'
} only %}
HTML
<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>

popover spacing variations

Popover Content Spacing Adjust the inset spacing of the content by using the spacing prop. Demo This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  content: content,
  spacing: 'medium',
} only %}
HTML
<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>

popover use case menu

Popover Menu Create a popover menu by combining the Popover and Menu components. Important Notes: It is recommended to set the spacing to none because the Menu component already has spacing built in. Demo
Twig
{% set trigger %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'This triggers a popover menu',
    attributes: {
      type: 'button'
    }
  } only %}
{% endset %}
{% set content %}
  {% include '@bolt-components-menu/menu.twig' with {
    title: 'Choose one of these',
    items: [
      {
        content: 'Menu item 1',
      },
      {
        content: 'Menu item 2',
      },
      {
        content: 'Menu item 2',
      },
    ]
  } only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  content: content,
  spacing: 'none',
} only %}
HTML
<bolt-popover>
  <button type="button" class="e-bolt-button">
    This triggers a popover
  </button>
  <div slot="content">
    <bolt-menu>
      <bolt-menu-item>
        Menu Item 1
      </bolt-menu-item>
      <bolt-menu-item>
        Menu Item 2
      </bolt-menu-item>
      <bolt-menu-item>
        Menu Item 3
      </bolt-menu-item>
    </bolt-menu>
  </div>
</bolt-popover>

popover use case custom width

Custom Popover Bubble Width The popover bubble width is set to 250px by default, but it can be customized per use case by defining the --c-bolt-popover-bubble-width CSS custom property via inline style. Important Notes: It is recommended to always use the CSS function min() when customizing the popover bubble width. This ensures the width will never break page layouts. The following example uses min(80vw, 500px), which means the width is set to 500px unless the browser width is smaller than 500px, then the width will become 80% of the browser width. Keep in mind that the min() function is not supported in Microsoft Edge 42 and older. If you need to support such old browser, you should set the custom width to a plain old absolute value such as 500px. Demo

This Is an Eyebrow

This Is a Headline

This is a paragraph.
Twig
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  content: content,
  attributes: {
    style: '--c-bolt-popover-bubble-width: min(80vw, 500px);'
  },
} only %}
HTML
<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>

popover theme variations

Popover Content Theming Adjust the Bolt color theme of the content by using the theme prop. Demo This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action . This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  content: content,
  theme: 'dark',
} only %}
HTML
<bolt-popover theme="dark">
  <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>

popover trigger event variations

Popover Trigger Event By default, popover activates on click, but the behavior can be changed to “hover” via the trigger_event prop. Demo This is the content of the popover with a call to action .
Twig
{% include '@bolt-components-popover/popover.twig' with {
  trigger: trigger,
  trigger_event: 'hover', // Default is 'click'.
  content: content,
} only %}
HTML
<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>