Popovers

<tk-popover position="top" aria-label="click for more information">
  <button slot="popover-trigger" class="btn">
    <tk-icon name="question-mark-circle--filled" size="small" color="mono"></tk-icon>
  </button>
  <div slot="popover-body">
    <p>Causes a person to hang upside-down in midair as if hoisted by the ankle.</p>
  </div>
</tk-popover>

<tk-popover popover-title="Levicorpus" aria-label="example aria text">
  <button slot="popover-trigger" class="btn--primary">Levicorpus</button>
  <div slot="popover-body">
    <p>Causes a person to hang upside-down in midair as if hoisted by the ankle.</p>
  </div>
</tk-popover>

<tk-popover position="top" aria-label="top example aria text">
  <button slot="popover-trigger" class="btn--primary">Revelio</button>
  <div slot="popover-body">
    <p>Reveals intruders and imposters.</p>
  </div>
</tk-popover>

<tk-popover position="top-left" aria-label="top example aria text">
  <button slot="popover-trigger" class="btn--primary">Revelio</button>
  <div slot="popover-body">
    <p>Reveals intruders and imposters.</p>
  </div>
</tk-popover>

<tk-popover position="top-right" aria-label="top example aria text">
  <button slot="popover-trigger" class="btn--primary">Revelio</button>
  <div slot="popover-body">
    <p>Reveals intruders and imposters.</p>
  </div>
</tk-popover>

<tk-popover position="bottom" aria-label="bottom example aria text">
  <button slot="popover-trigger" class="btn--primary">Wingardium Leviosa</button>
  <div slot="popover-body">
    <p>A charm that can levitate things.</p>
  </div>
</tk-popover>

<tk-popover position="left" aria-label="left example aria text">
  <button slot="popover-trigger" class="btn--primary">Alohomora</button>
  <div slot="popover-body">
    <p>A spell to open locks; aka "the thief's friend."</p>
  </div>
</tk-popover>

<tk-popover position="right" aria-label="right example aria text">
  <button slot="popover-trigger" class="btn--primary">Lumos</button>
  <div slot="popover-body">
    <p>A handy piece of magic that can turn a wand into a torch.</p>
  </div>
</tk-popover>

<tk-popover size="small" aria-Label="small example aria text">
  <button slot="popover-trigger" class="btn--primary">Expecto Patronum</button>
  <div slot="popover-body">
    <p>Summons a Patronus. Useful for chasing away Dementors.</p>
  </div>
</tk-popover>

<tk-popover size="medium" aria-label="medium example aria text">
  <button slot="popover-trigger" class="btn--primary">Expelliarmus</button>
  <div slot="popover-body">
    <p>Removes an object from an enemy's grasp. Most often the object is a wand.</p>
  </div>
</tk-popover>

<tk-popover size="large" aria-label="large example aria text">
  <button slot="popover-trigger" type="button" class="btn--primary">Accio</button>
  <div slot="popover-body">
    <p>Summon an object. If the object is protected, then it won't be retrieved. In his seventh year, George Weasley successfully summoned his broom from Dolores Umbridge's office when escaping Hogwarts. ⚡️</p>
  </div>
</tk-popover>

<tk-popover size="large" popover-trigger="buttonClick" aria-label="demo example aria text">
  <button slot="popover-trigger" type="button" class="btn--primary">Petrificus Totalus</button>
  <div slot="popover-body">
    <p>Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her</p>
  </div>
</tk-popover>