Popover

The popover is only meant to be used with ellipsis (kebab) menu positioned on the right edge of the screen. The popover will open next to the trigger (ellipsis menu).

The popover default position is above the trigger (similar to how tooltips work) but this can be changed to go downwards instead.

Default (top)

<!-- Popover -->
<div>
  <!-- popover trigger targets an element defined in the data-attribute -->
  <!-- this needs to be a selector that can be used with "document.querySelector('selector')" -->
  <button class="ui-btn ui-btn--reset" data-popover="#popover1">
    <i class="ui-icon ui-icon--ellipsis-vertical"></i>
  </button>

  <!-- popover is hidden by default -->
  <!-- it will be visible when the trigger targetting the ID is clicked -->
  <div class="ui-popover" id="popover1">
    <div class="ui-popover__body">
      <a class="ui-link ui-link--nav" href="#">...</a>
      <a class="ui-link ui-link--nav" href="#">...</a>
      <a class="ui-link ui-link--nav" href="#">...</a>
     </div>
  </div>
</div>

Positioned bottom

<!-- position bottom -->
<div>
  <!-- tooltip positioned below with data-popover-position="bottom" -->
  <button class="ui-btn ui-btn--reset" data-popover="#popover2" data-popover-position="bottom">
    <i class="ui-icon ui-icon--ellipsis-vertical"></i>
  </button>

  <div class="ui-popover" id="popover2">
    <div class="ui-popover__body">
      <a class="ui-link ui-link--nav" href="#">...</a>
      <a class="ui-link ui-link--nav" href="#">...</a>
      <a class="ui-link ui-link--nav" href="#">...</a>
      </div>
  </div>
</div>