Components

First time point out

First time point outs allow you to acclimate a new user to your application or a veteran user to new functionality.

Quick look

A few things to keep in mind when using first time point outs (FTPO):

  1. It may go without saying but a FTPO should only be used to point out functionality that a user is seeing for the first time. Once they dismiss it/navigate away from the functionality it won’t return.
  2. FTPOs can be chained together so as you dismiss one, a new one pops up after.
  3. If an FTPO is present on a page it will programmatically take the first tab-stop/focus.

Try it out

Welcome to this app

You can close this First time point out by pressing esc. Once dismissed you can reload the page to see it again.

Welcome, John Doe

You can close this First time point out by pressing esc. Once dismissed you can reload the page to see it again. This one has no arrow.

Code samples

<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow">
    <div class="dqpl-arrow-pointer"></div>
    <div class="dqpl-arrow-neck"></div>
  </div>
  <div class="dqpl-box">
    <button class="dqpl-ftp-dismiss fa fa-close" type="button" aria-label="dismiss"></button>
    <div class="dqpl-content" tabindex="-1">
      <h4 id="heading">Welcome to this app</h4>
      <p>You can close this First time point out by pressing esc. Once dismissed you can reload the page to see it again.</p>
    </div>
  </div>
</div>
<div class="dqpl-pointer-wrap dqpl-no-arrow" role="region" aria-labelledby="heading">
  <div class="dqpl-box">
    <button class="dqpl-ftp-dismiss fa fa-close" type="button" aria-label="dismiss"></button>
    <div class="dqpl-content" tabindex="-1">
      <h4 id="heading">Welcome, John Doe</h4>
      <p>You can close this First time point out by pressing esc. Once dismissed you can reload the page to see it again. This one has no arrow.</p>
    </div>
  </div>
</div>

For more information on implementation read thewiki.