Popover

• Introduction
• Basic Example
• Real World Example

Provides a positionable pop up box with toggle capabilities.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Popover module.

YUI().use(
  'aui-popover',
  function(Y) {
    // code goes here
  }
);

---

Using Popover

Create an HTML element that the popover will be aligned to.

<div class="node">Content</div>

Create a popover, set it to align with the newly created element, and render it.

YUI().use(
  'aui-popover',
  function(Y) {
    var node = Y.one('.node');

    var popover = new Y.Popover(
      {
        align: {
          //node that the popover will be aligned with
          node: node,
          //points that determine the position of the popover in relation to the node
          //[popover, node]
          points: [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.BC]
        },
        bodyContent: 'One fine body…',
        headerContent: 'Header content'
      }
    ).render();
  }
);

Configuring Popover

Popover can be set to both display and hide at different times.

YUI().use(
  'aui-popover',
  function(Y) {
    var node = Y.one('.node');

    var popover = new Y.Popover(
      {
        align: {
          node: node,
          points: [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.BC]
        },
        bodyContent: 'One fine body…',
        headerContent: 'Header content'
      }
    ).render();

    node.on(
      'click',
      function() {
        popover.set('visible', false);
      }
    );
  }
);

In addition to the header and body, footer content can be set. position determines where the arrow is positioned on the popover.

YUI().use(
  'aui-popover',
  function(Y) {
    var node = Y.one('.node');

    var popover = new Y.Popover(
      {
        align: {
          node: node,
          points: [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.BC]
        },
        bodyContent: 'One fine body…',
        footerContent: 'Here is the footer!',
        headerContent: 'Header content',
        position: 'top'
      }
    ).render();
  }
);

Plugins can be utilized to provide additional features, such as animation when visibility is toggled.

YUI().use(
  'aui-popover',
  'widget-anim',
  function(Y) {
    var node = Y.one('.node');

    var popover = new Y.Popover(
      {
        align: {
          node: node,
          points: [Y.WidgetPositionAlign.TC, Y.WidgetPositionAlign.BC]
        },
        bodyContent: 'One fine body…',
        headerContent: 'Header content',
        plugins: [Y.Plugin.WidgetAnim]
      }
    ).render();
  }
);