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.
Causes a person to hang upside-down in midair as if hoisted by the ankle.
<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>
Causes a person to hang upside-down in midair as if hoisted by the ankle.
<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>
Reveals intruders and imposters.
<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>
Reveals intruders and imposters.
<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>
Reveals intruders and imposters.
<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>
A charm that can levitate things.
<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>
Encumbers the spell target.
<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>
A spell to open locks; aka "the thief's friend."
<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>
A handy piece of magic that can turn a wand into a torch.
<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>
Summons a Patronus. Useful for chasing away Dementors.
<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>
Removes an object from an enemy's grasp. Most often the object is a wand.
<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>
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" 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>
Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her
<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>
Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her
<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">
<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>
</ul>
</div>
</tk-popover>
To position the popup with a relative position to the clicked element, the attribute position
should be set to coordinates
. You can then optionally use position-left
and position-right
.
<button>
position-top
and position-left
values are intended to be set dynamically, for example coordinates in a chart