Skip to main content

Popover

Popover

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.

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

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

    • 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

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

Envision documentation