Component: popover bar

To implement a popover, there are a few moving parts. First, you need to make sure to include jquery.extendedinput.js in your project. This is a jQuery plugin that makes it easy to toggle DOM elements using data attributes.

After initializing the plugin, use a button in a title bar to spawn a popover:

<a href="#" data-toggle-element="popover-context" class="cl-btn">Spawn a popover from title bar</a>

Make sure the popover is a sibling of .cl-page for the correct rendering.

<div class="hide" data-element-to-be-toggled="popover-context" data-element-to-be-closed="popover-context">
  <div class="cl-popover align-right pop-from-header">
    <div class="cl-article padded">
      <p>This is a popover!</p>
      <a href="#" class="cl-btn" data-close-element="popover-context">Close</a>
    </div>
  </div>
  <div class="cl-modal-backdrop"></div>
</div>
Bell 20:49 3G
20:49

This is a popover!

Close

This is a popover! Unfortunately we don't have exact positioning yet.

Close