Tooltip shows on click

Using Bootstrap and accessibility

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- 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>
</button>
<!-- Alert -->

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import 

body {
    margin: 10px;
}
.glyphicon {
  font-size: 16px;
}
.gly-radius {
  border-radius: 20px;
}

JavaScript

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