Popovers

Popovers are components that overlay on top of the interface. Popovers can contain a mix of information. Popovers are used to inform customers about specific content and actions.

Title Popover

Causes a person to hang upside-down in midair as if hoisted by the ankle.

<tk-popover popover-title="Levicorpus">
  <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>

Top

Reveals intruders and imposters.

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

Bottom

A charm that can levitate things.

<tk-popover position="bottom">
  <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>

Left

A spell to open locks; aka "the thief's friend."

<tk-popover position="left">
  <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>

Right

A handy piece of magic that can turn a wand into a torch.

<tk-popover position="right">
  <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>

Small

Summons a Patronus. Useful for chasing away Dementors.

<tk-popover size="small">
  <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>

Medium

Removes an object from an enemy's grasp. Most often the object is a wand.

<tk-popover size="medium">
  <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>

Large

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. ⚡️

<tk-popover size="large">
  <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>

Close on Button Click

Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her

<tk-popover size="large" popover-trigger="buttonClick">
  <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>

Do

  • Clearly title popovers when applicable
  • Use clear and concise language

Don't

  • Overlap popovers