These hints should be placed when there is additional helpful information that can be displayed to assist a user in making a decision.
Use tooltips for:
<div class="tooltip fade in right" style="display: inline-block; position: relative; width: auto;">
<div class="tooltip-inner">I'm a tooltip!</div>
<div class="tooltip-arrow"></div>
</div>Tooltips can be positioned either above, below, to the left, or to the right of target element. In many situations, tooltips should be positioned dynamically based on the available space around the target element.
<div style="margin-top: 65px; width: 120px;">
<button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip above">Position above</button>
<button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip to left">Position left</button>
<button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip to right">Position right</button>
<button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip below">Position below</button>
</div>The content of a tooltip can vary. It’s best to keep it to a few words.
<div style="margin-top: 25px; width: 120px;">
<button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="right" title="Print">Short</button>
<button type="button" class="btn btn-block btn-default" data-toggle="tooltip" data-placement="right" data-html="true" title='Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper volutpat ultrices. Mauris lobortis lacus vel ullamcorper vestibulum.'>Wrapping</button>
<button type="button" class="btn btn-block btn-block btn-default" data-toggle="tooltip" data-placement="right" data-html="true" title='<i class="fa fa-inverse fa-calendar-o"></i>
<strong>January 21</strong>
, 2014'>
Rich content
</button>
</div>