I currently have the accessible tooltip working on hover. /

<!-- 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. / ... 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');
});

/

I currently have the accessible tooltip working on hover. https://jsfiddle/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/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/lakenney/c1rogqxw/4/

• javascript
• jquery

• When asking a question, please describe the current behavior and/or error as well as the desired behavior. – nateyolles Commented Jun 19, 2016 at 3:23

2 Answers 2

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.

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/c1rogqxw/5/