Elements
These modular elements can be readily used and customized across pages and in different blocks.
tooltips static example <> show code
<button type="button" class="btn btn-secondary dark-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
how to use
- Tooltips rely on the 3rd party library Tether for positioning. You must include tether.min.js before bootstrap.js in order for Tooltips to work!
- Tooltips are opt-in for performance reasons, so you must initialize them yourself.
- To initialize tooltip you need to write the following code in your main js file
$(function () { $('[data-toggle="tooltip"]').tooltip() })
- You have to customize style using the classes generated by the plugin markup. Here is the generated markup
<!-- Generated markup by the plugin --> <div class="tooltip tooltip-top" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> Some tooltip text! </div> </div><!-- Markup ends-->
Example
Clickable Tooltip <> show code
<button type="button" class="btn btn-secondary dark-tooltip" data-toggle="tooltip" data-trigger="click" data-placement="top" title="Clickable Tooltip">
Clickable Tooltip
</button>
How to use
- By default Tooltips are triggered when the link element is hovered but you can alter this behaviour by adding a data-trigger="click|hover|focus" attribute.
Example