first time pointer

First Time Point Out

What is needed?

All first time point out's have a required common class dqpl-pointer-wrap. Within dqpl-pointer-wrap there should be 2 children elements with the classes of dqpl-arrow and dqpl-box. Within the dqpl-arrow element you should have two additional elements to create the arrow, that have the class of dqpl-arrow-pointer and dqpl-arrow-neck.

Within the dqpl-box element there should be a close button with the classes "dqpl-close fa fa-close" with the following accessible name (aria-label="dismiss"). Along with the close button there should be a div with the class dqpl-content and an added attribute of tabindex=-1.

Example HTML

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