title: Show tooltip on button click
body: <p>I currently have the accessible tooltip working on hover. <a href="https://jsfiddle.net/lakenney/c1rogqxw/" rel="nofollow">https://jsfiddle.net/lakenney/c1rogqxw/</a></p>
  
  <pre><code>&lt;!-- Alert --&gt;
  &lt;button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip"&gt;
    &lt;span class="glyphicon glyphicon-question-sign" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Click any question mark icon to get help and tips with specific tasks&lt;/span&gt;
   &lt;!-- Alert --&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Now I want to get it to work on Click. I'm following Julien Vernet's example except that I added accessibility markup. <a href="https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/" rel="nofollow">https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/</a>
  ... oh and I'm using button instead of href</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;button class="btn btn-xs btn-info gly-radius" data-toggle="tooltip" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip"&gt;
    &lt;span class="glyphicon glyphicon-question-sign" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;span class="sr-only"&gt;Click any question mark icon to get help and tips with specific tasks&lt;/span&gt;
    &lt;!-- Alert --&gt;
  &lt;/button&gt;
  
  $('[data-toggle="tooltip"]').click(function (event) {
         event.preventDefault();
         var target = $(this).attr('href');
         $(target).toggleClass('hidden show');
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/lakenney/c1rogqxw/4/" rel="nofollow">https://jsfiddle.net/lakenney/c1rogqxw/4/</a></p>