Popover v0.2.0+

Basic Popover

 
<hx-disclosure aria-controls="demoPopover" class="hxBtn">
  Toggle
</hx-disclosure>
<hx-popover id="demoPopover" position="bottom-right">
  <header>
    Popover Header
  </header>

  <hx-div>
    <p>
      This is my popover body.
    </p>
  </hx-div>

  <footer>
    <button class="hxBtn hxPrimary">Submit</button>
    <button class="hxBtn">Cancel</button>
  </footer>
</hx-popover>

Scrolling Popover

 
<hx-disclosure aria-controls="scrollingPopoverDemo" class="hxBtn">
  Toggle
</hx-disclosure>

<hx-popover id="scrollingPopoverDemo" position="bottom-right">
  <header>
    Popover Header
  </header>

  <hx-div scroll="vertical">
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </hx-div>

  <footer>
    <button class="hxBtn hxPrimary">Submit</button>
    <button class="hxBtn">Cancel</button>
  </footer>
</hx-popover>

See Also