Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/tourtip

DS v2

A tourtip points out a new feature or section of the page. A tourtip is open by default and must be explcitly closed using its close button. Once closed, it cannot be reopened.

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

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.

Tourtip

Here's something new to help you be successful at your task.

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

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.

Tourtip

Here's something new to help you be successful at your task.

With footer

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

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.

Tourtip

Here's something new to help you be successful at your task.

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

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

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