Skip to content
Toyota Motor Europe DXP Reference Guide

Popover / Tooltip

<div class="tng-popover">
  <div class="tng-popover-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.

Optional Elements

Section titled “Optional Elements”

Arrow

Section titled “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>

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 “Header”
<div class="tng-popover">
  <div class="tng-popover-bubble">
    <div class="tng-popover-header">
      <div class="tng-text-title">…</div>
      <button class="tng-icon-button is-neutral">
        <i class="tng-icon icon-close" aria-hidden="true"></i>
        <span class="sr-only">Close</span>
      </button>
    </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”
<div class="tng-popover">
  <div class="tng-popover-bubble">
    <p class="tng-text-body">…</p>
    <button class="tng-link-button">Link</button>
  </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.

Recipes

Section titled “Recipes”

Tooltip

Section titled “Tooltip”
source code

Popover

Section titled “Popover”
source code