Tooltips | Crossroads Digital Design Kit

The following code will enable all tooltips on the document:

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

Default Tooltips

Tooltips work with buttons and button links.

<div class="btn-group">
  <button type="button" class="btn btn-default" data-toggle="tooltip" title="Example text giving more information.">Tooltip on button</button>
  <button type="button" class="btn btn-link" data-toggle="tooltip" title="Example text giving more information.">Tooltip on link</button>
</div>

Tooltip Directions

You can change the direction which a tooltip appears by adding a data-placement attribute to the button.

<div class="btn-group">
  <button type="button" class="btn btn-default" data-placement="left" data-toggle="tooltip" title="Tooltip on left">Tooltip on left</button>
  <button type="button" class="btn btn-default" data-placement="right" data-toggle="tooltip" title="Tooltip on right">Tooltip on right</button>
  <button type="button" class="btn btn-default" data-placement="bottom" data-toggle="tooltip" title="Tooltip on bottom">Tooltip on bottom</button>
  <button type="button" class="btn btn-default" data-placement="top" data-toggle="tooltip" title="Tooltip on top">Tooltip on top</button>
</div>