Tooltips
Documentation and examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Example
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
Tooltip on the left
Tooltip on the top
Tooltip on the bottom
Tooltip on the right
Usage
The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>