<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger1"
  onClick="popoverToggle(popoverTrigger1, popover1)">
  Above (Default)
</tk-button>
<tk-v2-popover
  id="popover1"
>
  <h3 class="t-heading-3" slot="header">Levicorpus</h3>
  <p class="t-body">Causes a person to hang upside-down in midair as if hoisted by the ankle. <a class="t-body" href="https://www.hp-lexicon.org/magic/levicorpus/">Learn more</a></p>
</tk-v2-popover>

<hr class="horizontal-rule" />

<!-- Example: Below -->
<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger2"
  onClick="popoverToggle(popoverTrigger2, popover2)"
>
  Below
</tk-button>
<tk-v2-popover
  id="popover2"
  position="below"
>
  <h3 class="t-heading-3" slot="header">Wingardium Leviosa</h3>
  <p class="t-body">A charm that can levitate things.</p>
</tk-v2-popover>

<!-- Example: Leading -->
<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger3"
  onClick="popoverToggle(popoverTrigger3, popover3)"
>
  Leading
</tk-button>
<tk-v2-popover
  id="popover3"
  position="leading"
>
  <h3 class="t-heading-3" slot="header">Alohomora</h3>
  <p class="t-body">A spell to open locks; aka "the thief's friend."</p>
</tk-v2-popover>

<!-- Example: Trailing -->
<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger4"
  onClick="popoverToggle(popoverTrigger4, popover4)"
>
  Trailing
</tk-button>
<tk-v2-popover
  id="popover4"
  position="trailing"
>
  <h3 class="t-heading-3" slot="header">Lumos</h3>
  <p class="t-body">A handy piece of magic that can turn a wand into a torch.</p>
</tk-v2-popover>

<!-- Script is only necessary in non-framework uses. Otherwise, you can add the eventListener directly tk-v2-popover, and add the target attribute with a value of the trigger element ref. -->
<script>
  popover1.target = popoverTrigger1;
  popover2.target = popoverTrigger2;
  popover3.target = popoverTrigger3;
  popover4.target = popoverTrigger4;

  const popoverToggle  = (triggerButton, popover) => {
    triggerButton.setAttribute('aria-expanded', !popover.open);
    popover.open = !popover.open;
  }

  popover1.addEventListener('close', () => popoverToggle(popoverTrigger1, popover1));
  popover2.addEventListener('close', () => popoverToggle(popoverTrigger2, popover2));
  popover3.addEventListener('close', () => popoverToggle(popoverTrigger3, popover3));
  popover4.addEventListener('close', () => popoverToggle(popoverTrigger4, popover4));
</script>

<tk-button
  aria-expanded="false"
  class="l-inline-block"
  id="popoverSmallExampleTrigger"
  onClick="toggleSizePopover(popoverSmallExampleTrigger, popoverSmallExample)"
    arrow="true"

>
  Small
</tk-button>
<tk-v2-popover
  id="popoverSmallExample"
  size="small"
 >
    <h3 class="t-heading-3" slot="header">Levicorpus</h3>
    <p class="t-body">Causes a person to hang upside-down in midair as if hoisted by the ankle.</p>
</tk-v2-popover>

<tk-button
  aria-expanded="false"
  class="l-inline-block"
  id="popoverLargeExampleTrigger"
  onClick="toggleSizePopover(popoverLargeExampleTrigger, popoverLargeExample)"
>
  Large
</tk-button>
<tk-v2-popover
  id="popoverLargeExample"
  size="large"
>
  <div class="l-flex l-v-center" slot="header">
    <h3 class="t-heading-3 t-heavy">We could all have been killed - or worse, expelled</h2>
  </div>
    <p class="t-body">The world is indeed full of peril, and in it there are many dark places; but still there is much that is fair, and though in all lands love is now mingled with grief, it grows perhaps the greater.</p>
  <div class="btn-group">
    <tk-button class="mr-2x" type="outline">Cancel</tk-button>
    <tk-button>Send</tk-button>
  </div>
</tk-v2-popover>

<!-- Script is only necessary in non-framework uses. Otherwise, you can add the eventListener directly to the element. -->
<script>
  popoverSmallExample.target = popoverSmallExampleTrigger;
  popoverLargeExample.target = popoverLargeExampleTrigger;

const toggleSizePopover = (trigger, popover) => {
    trigger.setAttribute('aria-expanded', !popover.open);
    popover.open = !popover.open;
  }
  
  popoverSmallExample.addEventListener('close', () => toggleSizePopover(popoverSmallExampleTrigger, popoverSmallExample));
  popoverLargeExample.addEventListener('close', () => toggleSizePopover(popoverLargeExampleTrigger, popoverLargeExample));
</script>

<button
  aria-expanded="false"
  aria-label="Read more information"
  class="btn t-link"
  id="popoverTriggerIcon"
  onClick="toggleIconPopover(popoverTriggerIcon, popoverIcon)"
  type="button"
>
  <tk-icon
    name="question-mark-circle"
    size="small"
  ></tk-icon>
</button>
<tk-v2-popover
  id="popoverIcon"
>
  <p class="t-body">Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her.</p>
</tk-v2-popover>

<!-- Script is only necessary in non-framework uses. Otherwise, you can add the eventListener directly to the element. -->
<script>
  popoverIcon.target = popoverTriggerIcon;
  const toggleIconPopover = (trigger, popover) => {
    trigger.setAttribute('aria-expanded', !popover.open);
    popover.open = !popover.open;
  }
  popoverIcon.addEventListener('close', () => toggleIconPopover(popoverTriggerIcon, popoverIcon));
</script>