BS Tooltip
The Tooltip Plugin
The tooltip plugin is a little pop-up box that appears when the user moves the mouse pointer over an element.
—–BUTTON MUKAVA—-
Tip: Plugins can be added individually (via Bootstrap’s “tooltip.js” file) or all at once (“bootstrap.js” or “bootstrap.min.js”).
How To Create a Tooltip
To add a tooltip, use the data-toggle=”tooltip” attribute to an element.
Use the title element to provide the text that should be displayed under the tooltip:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Tooltips must be initialized using jQuery: pick the desired element and call the tooltip() method.
The code below will enable all tooltips in the document:
Example
<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
});</script>
Positioning Tooltips
By default, the tooltip appears on top of the element.
The data-placement attribute can be used to put the tooltip on the top, bottom, left, or right side of the element:
Example
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Tip: You can also use the data-placement attribute with the value “auto” to let the browser determine the position of the tooltip. For example, if the value is “auto left”, the tooltip will appear on the left side when possible, otherwise on the right.
