Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Card Select
  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

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.

Position: above, above-leading or above-trailing

Levicorpus

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

Lumos

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

Lumos

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

Expand Copy
<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>

Position: below, below-leading or below-trailing

Wingardium Leviosa

A charm that can levitate things.

Lumos

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

Lumos

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

Expand Copy
<!-- 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>

Position: leading, leading-above or leading-below

Alohomora

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

Lumos

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

Lumos

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

Expand Copy
<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>

Position: trailing, trailing-above or trailing-below

Lumos

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

Lumos

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

Lumos

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

Expand Copy
<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>

Description

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

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.

🗒 Usage

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.

⚠️ Important

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>

Size: default, small or large

Levicorpus

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

We could all have been killed - or worse, expelled

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.

Cancel Send
Expand Copy
<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>

Icon-only example

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

Expand Copy
<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>

Description

Please remember to add an aria-label to describe the icon’s intent to people using assistive technology.

Usage

Do

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

Don't

  • Overlap popovers

Accessibility

  • 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.