Popover / Tooltip

A popover is a floating content container that appears relative to a trigger element.

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Elements

Arrow

An arrow can be placed at top, right, bottom or left using the data-placement attribute.

<div class="tng-popover">
  <div class="tng-popover-arrow" data-placement="top"></div>
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Note

Use data-placement to position the arrow on a border (top, right, bottom, or left). Position it along that border by setting --tng-popover-arrow-x or --tng-popover-arrow-y via JavaScript, using a library like Floating UI. See the recipe below.

Backdrop

<div class="tng-backdrop"></div>
<div class="tng-popover">
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Note

When .tng-popover is used as an HTML Popover, you can set .tng-popover .has-backdrop and it will automatically apply the .tng-backdrop background. No need to create this element yourself!

Close button

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <button class="tng-icon-button is-neutral" aria-label="Close">
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Title

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <div class="tng-text-title">…</div>
    <p class="tng-text-body">…</p>
  </div>
</div>

Default

Ut aliqua.

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Contrast

Ut aliqua.

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

<div class="tng-popover">
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
    <a class="tng-link">Link</a>
  </div>
</div>

Default

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

Contrast

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Link

Recipes

Tooltip

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

This is a tooltip.

source code

Popover

Note

Recipes are plain-javascript examples to demonstrate interactive components using our styles. These illustrate how to manage accessibility and events.

Ut aliqua.

This is a popover with interactive content.

source code

Accessibility

Roles & attributes

• Tooltips — use role="tooltip" and link them to their trigger with aria-describedby.
• Popovers with interactive content — use role="dialog" (or role="alertdialog" when the user must acknowledge something). Link the trigger to the popover with aria-controls or use popovertarget.

HTML Popover API

The Popover API provides built-in accessibility benefits — including focus management, light-dismiss, and top-layer promotion — without custom JavaScript.

Attribute	Behaviour
popover (or popover="auto")	Light-dismiss enabled. Opening one auto popover closes other open auto popovers (unless they are nested or ancestral).
popover="manual"	No light-dismiss. Must be closed explicitly via popovertarget or JavaScript.
popover="hint"	Light-dismiss enabled. Hint popovers do not close auto popovers — allowing a tooltip to appear while a menu or dialog popover is still open. Only one hint popover can be open at a time. Ideal for tooltips.

Note

popover="hint" is newly available across browsers. Use it for tooltips that should not interfere with other popovers on the page. See MDN — Popover API: hint for details.

Keyboard interaction

Key	Action
Tab	Moves focus into and out of the popover. For auto and hint popovers the browser updates the tab order automatically.
Escape	Closes the popover (light-dismiss). When using popover="manual", implement this yourself or use a CloseWatcher.

Screen readers

• Always provide an accessible name. Use aria-label, aria-labelledby, or a visible title inside the popover bubble.
• For tooltips, ensure the trigger has aria-describedby pointing to the tooltip’s id so the description is announced when the trigger receives focus.
• For dialog popovers, set aria-expanded on the trigger to communicate the open / closed state.