Popovers

<div class="l-flex  l-justify-sp-between">
<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>

<!-- Example: Above Leading -->

<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger8"
  onClick="popoverToggle(popoverTrigger8, popover8)">
  Above Leading
</tk-button>
<tk-v2-popover
  id="popover8"
  position="above-leading">
  <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>

<!-- Example: Above Trailing -->

<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger7"
  onClick="popoverToggle(popoverTrigger7, popover7)">
  Above Trailing
</tk-button>
<tk-v2-popover
  id="popover7"
  position="above-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>
</div>

<!-- Example: Below -->
<div class="l-flex l-justify-sp-between">
<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: Below Leading -->

<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger6"
  onClick="popoverToggle(popoverTrigger6, popover6)">
  Below Leading
</tk-button>
<tk-v2-popover
  id="popover6"
  position="below-leading">
  <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>

<!-- Example: Below Trailing -->

<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger5"
  onClick="popoverToggle(popoverTrigger5, popover5)">
  Below Trailing
</tk-button>
<tk-v2-popover
  id="popover5"
  position="below-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>
</div>

<div class="l-flex l-justify-sp-between">
<!-- 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: Leading Above-->

<tk-button
aria-expanded="false"
class="l-inline-block mb-2x"
id="popoverTrigger10"
onClick="popoverToggle(popoverTrigger10, popover10)">
  Leading Above
</tk-button>
<tk-v2-popover
  id="popover10"
  position="leading-above">
  <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>

<!-- Example: Leading Below-->

<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger9"
  onClick="popoverToggle(popoverTrigger9, popover9)">
  Leading Below
</tk-button>
<tk-v2-popover
  id="popover9"
  position="leading-below">
  <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>
</div>

<div class="l-flex l-justify-sp-between">
<!-- 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>

<!-- Example: Trailing Above-->

<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger12"
  onClick="popoverToggle(popoverTrigger12, popover12)">
  Trailing Above
</tk-button>
<tk-v2-popover
  id="popover12"
  position="trailing-above">
  <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>

<!-- Example: Trailing Below-->

<tk-button
  aria-expanded="false"
  class="l-inline-block mb-2x"
  id="popoverTrigger11"
  onClick="popoverToggle(popoverTrigger11, popover11)">
  Trailing Below
</tk-button>
<tk-v2-popover
  id="popover11"
  position="trailing-below">
  <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>
</div>
<!-- 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;
  popover5.target = popoverTrigger5;
  popover6.target = popoverTrigger6;
  popover7.target = popoverTrigger7;
  popover8.target = popoverTrigger8;
  popover9.target = popoverTrigger9;
  popover10.target = popoverTrigger10;
  popover11.target = popoverTrigger11;
  popover12.target = popoverTrigger12;

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));
popover5.addEventListener('close', () => popoverToggle(popoverTrigger5, popover5));
popover6.addEventListener('close', () => popoverToggle(popoverTrigger6, popover6));
popover7.addEventListener('close', () => popoverToggle(popoverTrigger7, popover7));
popover8.addEventListener('close', () => popoverToggle(popoverTrigger8, popover8));
popover9.addEventListener('close', () => popoverToggle(popoverTrigger9, popover9));
popover10.addEventListener('close', () => popoverToggle(popoverTrigger10, popover10));
popover11.addEventListener('close', () => popoverToggle(popoverTrigger11, popover11));
popover12.addEventListener('close', () => popoverToggle(popoverTrigger12, popover12));
</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</h3>
  </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>

<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>

<tk-button
  aria-expanded="false"
  class="l-inline-block"
  id="popoverActionTrigger"
  onClick="toggleActionPopover(popoverActionTrigger, popoverAction)">
  Trigger
</tk-button>
<tk-v2-popover
  id="popoverAction"
  position="above-leading"
>
  <p class="t-body">Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her.</p>
  <tk-button type="outline" slot="actions">Secondary</tk-button>
  <tk-button slot="actions">Primary</tk-button>
</tk-v2-popover>

<script>
  popoverAction.target = popoverActionTrigger;
  const toggleActionPopover = (trigger, popover) => {
    trigger.setAttribute('aria-expanded', !popover.open);
    popover.open = !popover.open;
  }
  popoverAction.addEventListener('close', () => toggleActionPopover(popoverActionTrigger, popoverAction));
</script>