<div style="height: 200px"></div>
<button
  class="sky-btn sky-btn-default sky-margin-inline-compact"
  type="button"
  [skyPopover]="myPopover"
  [skyPopoverAlignment]="popoverAlignment"
  [skyPopoverPlacement]="popoverPlacement"
  data-sky-id="test-popover"
>
  Open popover on click
</button>
<sky-popover [popoverTitle]="popoverTitle" #myPopover>
  <span class="popover-body">
    {{ popoverBody }}
  </span>
</sky-popover>

<button
  class="sky-btn sky-btn-default sky-margin-inline-compact"
  type="button"
  [skyPopover]="myOtherPopover"
  [skyPopoverAlignment]="popoverAlignment"
  [skyPopoverPlacement]="popoverPlacement"
  data-sky-id="another-popover"
>
  Another popover trigger
</button>
<sky-popover popoverTitle="Another popover" #myOtherPopover>
  <span class="popover-body">I have different content</span>
</sky-popover>
