Popover

<div class="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. Cras luctus semper
         facilisis. Aliquam diam risus, tincidunt vitae erat sed, lobortis
         pretium magna. Donec sollicitudin lorem eget imperdiet auctor.
      </p>
   </div>
</div>

Configuration and initialization

Initialize from script. Use data-attributes or option parameters in JavaScript for settings.

See available options below.

Example using data-attributes

<button
   class="env-button env-button--primary example-popover-data"
   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>

Initialization of data-attributes example

envision.popover('.example-popover-data');

Example using JavaScript

Content is read from hidden DOM element and displayed in the popover.

<div id="example-popover-content" class="env-d--none">
   <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>
</div>
<button class="env-button env-button--primary example-popover-js">
   Click me!
</button>

Initialization of JavaScript options example

const popoverContentEl = document.querySelector('#example-popover-content');
if (popoverContentEl) {
   envision.popover('.example-popover-js', {
      placement: 'bottom',
      title: 'Lorem ipsum',
      content: popoverContentEl.innerHTML,
      escapeContent: false,
      clickOutside: true,
   });
}

Popover menu 9.0

<div class="env-popover" data-popper-placement="top">
   <div class="env-popover__arrow"></div>
   <div class="env-popover__header">
      <h4 class="env-ui-text-overline" id="popover-heading">Popover menu</h4>
   </div>
   <ul class="env-popover__menu" aria-labelledby="popover-heading">
      <li>
         <button type="button" class="env-popover__item">
            <svg class="env-icon">
               <use xlink: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 xlink: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
                  xlink:href="/sitevision/envision-icons.svg#icon-check-done"
               ></use>
            </svg>
            Settings
         </button>
      </li>
   </ul>
</div>

Popover Tooltip 2023.02.1

Add modifier env-popover--tooltip for a Tooltip-styled popover. Common text components will adjust color automatically.

<div class="env-popover env-popover--tooltip" data-popper-placement="bottom">
   <div class="env-popover__arrow"></div>
   <div class="env-popover__header">
      <h4 class="env-ui-text-overline">Popover Tooltip</h4>
   </div>
   <div class="env-popover__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>
   </div>
</div>

Options

  • placement string

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

  • title string

    • Popover title.
    • Default value: ''

  • content string

    • 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