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. Learn more
A handy piece of magic that can turn a wand into a torch.
A handy piece of magic that can turn a wand into a torch.
<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>
A charm that can levitate things.
A handy piece of magic that can turn a wand into a torch.
A handy piece of magic that can turn a wand into a torch.
<!-- 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>
A spell to open locks; aka "the thief's friend."
A handy piece of magic that can turn a wand into a torch.
A handy piece of magic that can turn a wand into a torch.
<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>
A handy piece of magic that can turn a wand into a torch.
A handy piece of magic that can turn a wand into a torch.
A handy piece of magic that can turn a wand into a torch.
<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>
There are 12 positions for displaying a popover in relation to its trigger: above
(default), above-leading
, above-trailing
, below
, below-leading
,below-trailing
, leading
, leading-above
, leading-below
, trailing
, trailing-above
and trailing-below
.
Position is treated as a preference. If there isn’t enough space in the viewport, it will automatically attempt to display in a position that fits. See full-page examples: above, below, leading, or trailing.
Setting the open
Prop on the popover controls visibility. It requires a target
to be set as well: this tells the popover which element is its “anchor.” The popover will emit an event (close
) when esc
is pressed, or when there is a click outside of the popover.
Please add an event handler for the close
event that then sets the open
Prop to false. This is needed for accessibility and UX reasons. Also, set the aria-expanded
state on the trigger.
When using within an existing JS framework, such as Angular, you can simplify this quite a bit:
<tk-button
#popoverTrigger1
class="l-inline-block"
[attr.aria-expanded]="popoverVisible$ | async"
(click)="popoverVisible$.next(!popoverVisible$.getValue())"
>Button</tk-button>
<tk-v2-popover
#popover1
[attr.open]="popoverVisible$ | async"
[attr.target]="#popoverTrigger1"
(close)="popoverVisible$.next(false)"
>Content</tk-v2-popover>
Causes a person to hang upside-down in midair as if hoisted by the ankle.
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.
<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>
Full Body-Bind Curse; temporarily binds the victim’s entire body, thus immobilizing him or her.
<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>
Please remember to add an aria-label
to describe the icon’s intent to people using assistive technology.
Popover trigger should have an aria-expanded
attribute that is dynamically set when the open
Prop is true.
There should only be one id
per page.