<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<li><a href="#" class="tip-auto" title="<b class='myColor'>Tooltip</b> set to auto <i>side</i> with <h2>HTML</h2>"><img src = "http://www.pchelarstvo.com/wp-content/uploads/2014/07/bee1.png">
</a></li>
</ul>
</div>
<br><br><br><br>
</div>
</div>
.myColor{
color:red;
}
/*
Tooltips can seem a little confusing, this example should clarify
For performance reasons, the Tooltip and Popover data-apis are opt-in,
meaning you MUST initialize them yourself via JavaScript.
Ref: http://getbootstrap.com/javascript/#tooltips
One way to initialize all tooltips on a page would be to select them by their "data-toggle" attribute:
$(function () {
$('[data-toggle="myToolTip"]').tooltip()
})
Note: the "data-toggle" is in the HTML, like this:
data-toggle="myToolTip"
Tool tips may also be called by id or Class
$('some id or class that you add to the above a tag').tooltip()
Here is some JavaScript that does both, for a a link, and a button
top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
*/
$(document).ready(function(){
// Method 1 - uses 'data-toggle' to initialize
$('[data-toggle="myToolTip"]').tooltip();
/* - - - - - - - - - - - - - - - - - - - */
// Method 2 - uses the id, class or native tag, could use .btn as class
$('button').tooltip();
// options set in JS by class
$(".tip-top").tooltip({
placement : 'top'
});
$(".tip-right").tooltip({
placement : 'right'
});
$(".tip-bottom").tooltip({
placement : 'bottom'
});
$(".tip-left").tooltip({
placement : 'left',
html : true
});
$(".tip-auto").tooltip({
placement : 'auto',
html : true
});
});
