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.
  4. The arrow can be pointed in different directions given the correct class name.

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.

Select arrow position

Top Left
Top Middle
Top Right
Right Top
Right Middle
Right Bottom
Bottom Right
Bottom Middle
Bottom Left
Left Bottom
Left Middle
Left Top
No Arrow

Code samples

<!-- Top Left Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow top-left">
    <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>
<!-- Top Middle Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow top-middle">
    <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>
<!-- Top Right Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow top-right">
    <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>
<!-- Right Top Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow right-top">
    <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>
<!-- Right Middle Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow right-middle">
    <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>
<!-- Right Bottom Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow right-bottom">
    <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>
<!-- Bottom Right Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow bottom-right">
    <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>
<!-- Bottom Middle Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow bottom-middle">
    <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>
<!-- Bottom Left Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow bottom-left">
    <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>
<!-- Left Bottom Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow left-bottom">
    <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>
<!-- Left Middle Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow left-middle">
    <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>
<!-- Left Top Arrow-->
<div class="dqpl-pointer-wrap" role="region" aria-labelledby="heading">
  <div class="dqpl-arrow left-top">
    <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>
<!-- No Arrow (using the no-arrow class)-->
<div class="dqpl-pointer-wrap dqpl-no-arrow" 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>
<!-- No Arrow (not including the arrow element)-->
<div class="dqpl-pointer-wrap" 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 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>

For more information on implementation read thewiki.