Popover v0.2.0+ HelixUI v0.2.0 or later required

Toggle

Popover Header

This is my popover body.

<hx-disclosure aria-controls="demoPopover" class="hxBtn">
  Toggle
</hx-disclosure>
<hx-popover id="demoPopover" position="{{position.value}}">
  <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>

Toggle

Popover Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus. Sagittis vitae et leo duis ut diam quam nulla. Diam vel quam elementum pulvinar etiam non. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Ultricies integer quis auctor elit sed vulputate mi sit amet. Egestas dui id ornare arcu odio ut. In iaculis nunc sed augue. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet. Erat velit scelerisque in dictum non. Auctor augue mauris augue neque gravida in fermentum et. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt vitae semper quis lectus nulla. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Etiam sit amet nisl purus in mollis nunc. Diam sit amet nisl suscipit. Nulla pharetra diam sit amet nisl. Arcu odio ut sem nulla.

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

<hx-popover id="scrollingPopoverDemo" position="{{position.value}}">
  <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>

Popover v0.2.0+ HelixUI v0.2.0 or later required

Basic Popover

Scrolling Popover

See Also