Skip to content

CSS

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

<div class="tng-toggletip is-contrast">
  <div class="tng-toggletip-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

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.

Tooltip variant

Section titled “Tooltip variant”

The read-only form is the same component with role="tooltip" on the root. That one attribute switches it to the compact chip: tighter padding, a smaller radius and a smaller arrow. The styling is deliberately keyed off the role rather than a modifier class, so the chip look can’t be applied without the semantics that make it announce correctly.

A tooltip hugs its content instead of holding the toggletip’s 200px minimum. It still wraps at the shared maximum — keep the copy to a few words and it will sit on one line.

<div class="tng-toggletip is-contrast" role="tooltip">
  <div class="tng-toggletip-arrow" data-placement="bottom"></div>
  <div class="tng-toggletip-bubble">
    <p class="tng-text-body">Measured on the WLTP cycle</p>
  </div>
</div>

Elements

Section titled “Elements”

Arrow

Section titled “Arrow”

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

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

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.

Backdrop

Section titled “Backdrop”
<div class="tng-backdrop"></div>
<div class="tng-toggletip is-contrast">
  <div class="tng-toggletip-bubble">
    <p class="tng-text-body">…</p>
  </div>
</div>

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.

Close button

Section titled “Close button”
<div class="tng-toggletip is-contrast">
  <div class="tng-toggletip-bubble">
    <button class="tng-icon-button is-ghost" aria-label="Close">
      <i class="tng-icon icon-close" aria-hidden="true"></i>
    </button>
    <p class="tng-text-body">…</p>
  </div>
</div>

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

Section titled “Title”
<div class="tng-toggletip is-contrast">
  <div class="tng-toggletip-bubble">
    <div class="tng-text-title">…</div>
    <p class="tng-text-body">…</p>
  </div>
</div>
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.

Section titled “Link”

Compose the link with .is-neutral so it adopts the toggletip’s foreground colour instead of the default link blue.

<div class="tng-toggletip is-contrast">
  <div class="tng-toggletip-bubble">
    <p class="tng-text-body">…</p>
    <a class="tng-link is-neutral">Link</a>
  </div>
</div>

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

Section titled “Recipes”

Tooltip

Section titled “Tooltip”
source code

Toggletip

Section titled “Toggletip”
source code