Show tooltip on button click

Question

I currently have the accessible tooltip working on hover. https://jsfiddle.net/lakenney/c1rogqxw/

<!-- Alert -->
<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">
  <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
  <span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
 <!-- Alert -->
</button>

Now I want to get it to work on Click. I'm following Julien Vernet's example except that I added accessibility markup. https://themeavenue.net/show-hide-element-onclick-using-boostrap-jquery/ ... oh and I'm using button instead of href

This is what I have so far:

<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">
  <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
  <span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
  <!-- Alert -->
</button>

$('[data-toggle="tooltip"]').click(function (event) {
       event.preventDefault();
       var target = $(this).attr('href');
       $(target).toggleClass('hidden show');
});

https://jsfiddle.net/lakenney/c1rogqxw/4/

Answer 1

Add the "trigger" option to your original code:

$(function () {
  $('[data-toggle="tooltip"]').tooltip({ trigger: 'click' });
});

jsfiddle

---

In your second fiddle, you are no longer calling .tooltip() on the button element. You must call that function to instrument the tooltip. By default the tooltip is triggered by hovering over the button. You can change that by providing an options object to the call to .tooltip(). Specifically, you can include the "trigger" option.

Answer 2

You need to do popover instead of tooltip

<button class="btn btn-xs btn-info gly-radius" data-toggle="popover" data-placement="bottom" data-original-title="Click any question mark icon to get help and tips with specific tasks" data-content="Click any question mark icon to get help and tips with specific tasks" aria-describedby="tooltip">
  <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
  <span class="sr-only">Click any question mark icon to get help and tips with specific tasks</span>
  <!-- Alert -->
</button>

Js code

$('[data-toggle="popover"]').popover();

here is the updated fiddle https://jsfiddle.net/c1rogqxw/5/