Popovers

Popovers are animated toggleable overlay lists of options suitable for use with boxes. They are placed on the top-right corner of a box, using the following structure. Only one popover per box is allowed.

• Popover component
• Usage
  • Via data attributes
  • Via javascript
  • Javascript methods
  • Javascript events

Popover component

Popover components have been initially designed to be used with boxes as shown below.

Code output

HTML Markup

Copy<div class="box pad-md">
  <div class="popover">
      <button class="btn-popover-toggle" data-toggle="popover"><i class="popover-icon"></i></button>
      <div class="popover-inner">
        <a class="simple-link" href=#>Option 1</a>
        <a class="simple-link" href=#>Option 2</a>
        <a class="simple-link" href=#>Option 3</a>
      </div>
   </div>
  <h3 class="text-center">Box title</h3>
  <p>Box content of a box that also contains a popover with options on the top right corner next to the box title.</p>
</div>

Usage

Popover functionality can be enabled and controlled using HTML data attributes or Javascript.

Via data attributes

Popover functionality is enabled by adding a data-toggle="popover" attribute on the btn-popover-toggle button of a popover component.

HTML Markup

Copy<div class="popover" data-toggle="popover">
    <button class="btn-popover-toggle"><i class="popover-icon"></i></button>
    <div class="popover-inner">
      <a class="simple-link" href=#>Option 1</a>
      <a class="simple-link" href=#>Option 2</a>
      <a class="simple-link" href=#>Option 3</a>
    </div>
 </div>

Via Javascript

Popovers that hold a unique id can be called using Javascript.

Copy$('#id').popover()

Javascript methods

The following methods are available for popovers that hold a unique id.

Copy$('#id').popover('toggle')

Copy$('#id').popover('show')

Copy$('#id').popover('hide')

Javascript events

The popover component exposes events at specific triggering points to extend component functionality. Each event instance fires as soon as the pre-specified hooks are reached within the Javascript code. The following events are available for the popover component and are linked directly to the popover and not the control triggering elements, like the buttons triggering the popover.

Copy$('#id').on('show.sky.popover', function(e) {
  // Extend function
});

Copy$('#id').on('shown.sky.popover', function(e) {
  // Extend function
});

Copy$('#id').on('hidden.sky.popover', function(e) {
  // Extend function
});