Tourtip Component

Toggle the tourtip--expanded modifier to expand or collapse the tourtip.

<div class="tourtip tourtip--expanded">
  <p class="tourtip__host">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <div
    class="tourtip__overlay"
    role="region"
    aria-labelledby="tourtip-label"
    style="bottom: -125px; left: -6px; top: auto"
  >
    <span class="tourtip__pointer tourtip__pointer--top-left" />
    <div class="tourtip__mask">
      <div class="tourtip__cell">
        <span class="tourtip__content">
          <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
          <p>Here's something new to help you be successful at your task.</p>
        </span>
        <button
          class="icon-btn icon-btn--transparent tourtip__close"
          type="button"
          aria-label="Dismiss tourtip"
        >
          <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
            <use href="#icon-close-16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

By default, the position of the overlay and its pointer will remain static. For these following examples, we are using floating-ui to help position the tooltip and the pointer dynamically.

In order to get this to work with floating-ui, you need to remove pointer position tourtip__pointer--top-left and remove any style positioning

<div class="tourtip tourtip--expanded">
  <p class="tourtip__host">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label">
    <span class="tourtip__pointer" />
    <div class="tourtip__mask">
      <div class="tourtip__cell">
        <span class="tourtip__content">
          <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
          <p>Here's something new to help you be successful at your task.</p>
        </span>
        <button
          class="icon-btn icon-btn--transparent tourtip__close"
          type="button"
          aria-label="Dismiss tourtip"
        >
          <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
            <use href="#icon-close-16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

With footer

Tourtip also supports having a footer as well as an index in the case there are multiple tourtips on the page

<div class="tourtip tourtip--expanded">
  <p class="tourtip__host">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <div
    class="tourtip__overlay"
    style="
      left: calc(50% - 200px);
      right: auto;
      top: calc(100% + 12px);
      bottom: auto;
    "
    role="region"
    aria-labelledby="tourtip-label"
  >
    <span class="tourtip__pointer" />
    <div class="tourtip__mask">
      <div class="tourtip__cell">
        <span class="tourtip__content">
          <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
          <p>Here's something new to help you be successful at your task.</p>
        </span>
        <button
          class="icon-btn icon-btn--transparent tourtip__close"
          type="button"
          aria-label="Dismiss tourtip"
        >
          <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
            <use href="#icon-close-16" />
          </svg>
        </button>
        <div class="tourtip__footer">
          <span class="tourtip__index"> 1 / 3 </span>
          <button class="fake-link">Back</button>
          <button class="btn btn--primary">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>