title: Using Intro.js hints on bootstrap modal window, hints displays behind modal
body: <p>I am using the intro.js "hints" plugin (<a href="https://introjs.com/example/hint/index.html" rel="nofollow noreferrer">https://introjs.com/example/hint/index.html</a>, <a href="https://introjs.com/docs/hints/api/" rel="nofollow noreferrer">https://introjs.com/docs/hints/api/</a>) on a bootstrap web site. I need the hints to work on bootstrap modals, however the hints are displayed behind the modal window. I tried adjusting the z-index of the .introjs-hint-pulse and the .introjs-hint-dot selectors and the .modal selector with no results.</p>
  
  <p>Any ideas on what I need to do to get the hints to display above the modal window as needed? </p>
  
  <p>I also need to figure out how to hide all of the displayed hints at once, but then be able to show them again when the link is reclicked - like a toggle. I have one icon used to show the hints, and I want to be able to click again to toggle and hide the hints.</p>
  
  <p>I am including links to the hints API, as it shows the options for refreshing and hiding the hints, but I am new to jQuery &amp; JS and am not sure how to get it to work.</p>
  
  <p>Also, I am trying to figure out a way to auto hide the hints on the modal if the modal is closed with them still visible.</p>
  
  <p>I have a jsfiddle with a test modal and the intro.js hints. If you open the modal, then click on the "Show Hints" link, you will notice the hints are not visible. But if you close the modal you can see the hints are visible behind the modal window.
  JS Fiddle link: <a href="http://jsfiddle.net/1aeur58f/998/" rel="nofollow noreferrer">http://jsfiddle.net/1aeur58f/998/</a></p>
  
  <p>HTML of example:</p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;a href="#notesModal" data-toggle="modal" role="dialog" id="btnOpenModal" class="btn btn-primary"&gt;Open Notes Modal&lt;/a&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Notes&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            &lt;div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned"&gt;
                 &lt;input type="text" name="note" class="col-md-11" maxlength="300"/&gt;&lt;button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned"&gt;Add&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="bottom-right-aligned" style="margin-left:15px;"&gt;0/300
        &lt;/div&gt;          
        &lt;div&gt;&lt;a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"&gt;&lt;i class="fa fa-bus"&gt;&lt;/i&gt;&amp;nbsp;Show Hints&lt;/a&gt;&lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The intro.js and introjs.css are linked in the jsfiddle external resources for viewing.</p>