Popover

<div class="example-static-popover env-popover" data-popper-placement="bottom">
   <div class="env-popover__arrow"></div>
   <div class="env-popover__header">
      <h4 class="env-ui-text-overline">Popover</h4>
   </div>
   <div class="env-popover__content">
      <p class="env-text">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum
         nunc bibendum laoreet malesuada. Proin eget augue tortor. Sed bibendum
         cursus eros, vitae mattis leo laoreet eget.
      </p>
   </div>
</div>

Configuration and initialization

Initialize from script. Use data-attributes on the opener element or option parameters in JavaScript for settings.

See available options below.

Example using data-attributes

<button
   id="example-popover-data"
   class="env-button env-button--primary"
   data-placement="top"
   data-trigger="hover focus"
   data-title="Lorem ipsum"
   data-delay="200"
   data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum nunc bibendum laoreet malesuada. Proin eget augue tortor. Sed bibendum cursus eros, vitae mattis leo laoreet eget."
>
   Hover or focus me!
</button>
envision.popover('#example-popover-data');

Example using JavaScript

The content will be fetched from a template element and displayed in the popover.

<template id="example-popover-content">
   <div class="env-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>In fermentum <a href="#">nunc bibendum laoreet</a> malesuada.</p>
      <p>
         Proin eget augue tortor. <b>Sed bibendum cursus eros</b>, vitae mattis
         leo laoreet eget.
      </p>
   </div>
</template>
<button id="example-popover-button" class="env-button env-button--primary">
   Click me!
</button>
const popoverContentEl = document.querySelector('#example-popover-content');
if (popoverContentEl) {
   envision.popover('#example-popover-button', {
      placement: 'bottom',
      title: 'Lorem ipsum',
      content: popoverContentEl,
      escapeContent: false,
      clickOutside: true,
   });
}

Popover menu

Add type: 'menu' in JS or data-type="menu" in HTML for a menu-styled popover. Use class env-popover__item for the menu items.

Popover menu

<template id="example-popover-menu-content">
   <ul>
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-file"></use>
            </svg>
            Action
         </button>
      </li>
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-bell"></use>
            </svg>
            Properties
         </button>
      </li>
      <li class="env-popover--divider" role="separator"></li>
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-check-done"></use>
            </svg>
            Settings
         </button>
      </li>
   </ul>
</template>
<button id="example-popover-menu-button" class="env-button env-button--primary">
   Show popover menu
</button>
const popoverMenuContentEl = document.querySelector(
   '#example-popover-menu-content'
);
if (popoverMenuContentEl) {
   envision.popover('#example-popover-menu-button', {
      placement: 'top',
      title: 'Popover menu',
      content: popoverMenuContentEl,
      escapeContent: false,
      clickOutside: true,
      type: 'menu',
   });
}

Popover Tooltip 2023.05.1

Add type: 'tooltip' in JS or data-type="tooltip" in HTML for a Tooltip-styled popover. Common text components will adjust color automatically.

Popover Tooltip

Lorem ipsum dolor sit amet 

<template id="example-popover-tooltip-content">
   <p class="env-text">
      Lorem ipsum dolor sit amet,
      <a href="javascript:void(0)">consectetur adipiscing elit</a>. In fermentum
      nunc bibendum laoreet malesuada.
   </p>
   <p class="env-ui-text-caption">Aliquam diam risus tincidunt.</p>
</template>
<button
   id="example-popover-tooltip-button"
   class="env-button env-button--primary"
>
   Show popover tooltip
</button>
const popoverTooltipContentEl = document.querySelector(
   '#example-popover-tooltip-content'
);
if (popoverTooltipContentEl) {
   envision.popover('#example-popover-tooltip-button', {
      placement: 'top',
      title: 'Popover tooltip',
      content: popoverTooltipContentEl,
      escapeContent: false,
      clickOutside: true,
      type: 'tooltip',
   });
}

Options

  • placement string

    • Prefered initial placement.
    • Default value: top
    • Possible values: top, right, bottom, left

  • title string

    • Popover title.
    • Default value: ''

  • content string | HTMLElement 2023.05.1

    • Popover content.
    • Default value: ''

  • escapeContent boolean

    • Treat option content as text or HTML. If popover content is HTML, this needs to be set to false.
    • Default value: true

  • trigger string

    • Single event or mulitple space separated events for opening the popover.
    • Default value: click

  • delay number

    • Milliseconds for delaying the popover closing. When opening on hover, a value of at least 200 is recommended.
    • Default value: 0

  • clickOutside boolean

    • Close popover on click outside.
    • Default value: false

  • type string 2023.05.1

    • Popover styling
    • Default value: null
    • Possible values: menu, tooltip

Envision documentation