Bs Tooltip

Bootstrap Tooltip Plugin

---

The Tooltip Plugin

The Tooltip plugin is pocket-sized pop-up box that appears when the user moves the mouse pointer over an element:

Hover over me

Tip: Plugins tin flame hold upward included individually (using Bootstrap's private "tooltip.js" file), or all instantly (using "bootstrap.js" or "bootstrap.min.js").

---

How To Create a Tooltip

To attain a tooltip, add together the data-toggle="tooltip" attribute to an element.
Use the title attribute to specify the text that should hold upward displayed within the tooltip:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

Note: Tooltips must hold upward initialized amongst jQuery: choose the specified chemical component division together with telephone telephone the tooltip() method.
The next code volition enable all tooltips inwards the document:

Example

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

---

Positioning Tooltips

By default, the tooltip volition seem on superlative of the element.
Use the data-placement attribute to laid the pose of the tooltip on top, bottom, left or the correct 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 tin flame also usage the data-placement attribute amongst a value of "auto", which volition permit the browser attain upward one's heed the pose of the tooltip. For example, if the value is "auto left", the tooltip volition display on the left side when possible, otherwise on the right.

---