Popovers

<tk-popover position="top" aria-label="click for more information">
  <button slot="popover-trigger" class="btn">
    <tk-icon name="question-mark-circle" 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="bottom-right" aria-label="bottom-right example aria text">
  <button slot="popover-trigger" class="btn--primary">Weight of the World</button>
  <div slot="popover-body">
    <p>Encumbers the spell target.</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>

<tk-popover
  size="large"
  aria-label="demo example aria text"
  position="coordinates"
  position-left="300"
  position-top="-250">
  <button
    slot="popover-trigger"
    type="button"
    class="btn--primary">Riddikulus</button>

  <div class="l-flex l-v-center" slot="popover-header">
    <h2>We could all have been killed - or worse, expelled</h2>
    <div class="l-flex ml-auto">
      <button class="btn--primary t-xs ml-auto" type="button">Wingardium Leviosa</button>
    </div>
  </div>

  <div slot="popover-body" style="max-height: 100px">
    <p>Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her</p>
    <ul>
      <li>List no 1</li>
      <li>List no 2</li>
      <li>List no 3</li>
      <li>List no 4</li>
      <li>List no 5</li>
      <li>List no 6</li>
      <li>List no 7</li>
      <li>List no 8</li>
    </ul>
  </div>
</tk-popover>

<tk-popover
  size="large"
  aria-label="demo example aria text"
  position="coordinates-top"
  position-left="220"
  position-top="-210">
  <button
    slot="popover-trigger"
    type="button"
    class="btn--primary">Riddikulus Bottom Arrow</button>

  <div class="l-flex l-v-center" slot="popover-header">
    <h2>Just set position to coordinates-top</h2>
    <div class="l-flex ml-auto">
      <button class="btn--primary t-xs ml-auto" type="button">Wingardium Leviosa</button>
    </div>
  </div>

  <div slot="popover-body" style="max-height: 100px">
    <p>Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her</p>
    <ul>
      <li>List no 1</li>
      <li>List no 2</li>
      <li>List no 3</li>
      <li>List no 4</li>
      <li>List no 5</li>
      <li>List no 6</li>
      <li>List no 7</li>
      <li>List no 8</li>
    </ul>
  </div>
</tk-popover>

<tk-popover
  size="large"
  aria-label="demo example aria text"
  position="coordinates-bottom"
  position-left="200"
  position-top="50">
  <button
    slot="popover-trigger"
    type="button"
    class="btn--primary">Riddikulus Top Arrow</button>

  <div class="l-flex l-v-center" slot="popover-header">
    <h2>Just set position to coordinates-bottom</h2>
    <div class="l-flex ml-auto">
      <button class="btn--primary t-xs ml-auto" type="button">Wingardium Leviosa</button>
    </div>
  </div>

  <div slot="popover-body" style="max-height: 100px">
    <p>Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her</p>
    <ul>
      <li>List no 1</li>
      <li>List no 2</li>
      <li>List no 3</li>
      <li>List no 4</li>
      <li>List no 5</li>
      <li>List no 6</li>
      <li>List no 7</li>
      <li>List no 8</li>
    </ul>
  </div>
</tk-popover>