Adding tooltips in icons
In the Bootstrap tooltip tutorial, I have shown you creating tooltips over buttons, links, input fields etc. I have also shown how to create tooltips with HTML content inside it.
In this article, I will show how to add tooltips to Bootstrap glyph icons and font-awesome icons.
A demo of adding tooltips to font-awesome icons
For this demo of showing the tooltips as the mouse hovers over the icons, the Bootstrap CSS, jQuery, and bootstrap JS files are included in the head section. Besides, as it uses the font-awesome icons, so a reference to its CSS file is also included in the head section.
A few icons are used from the library. The tooltips text is specified in the data-original-title attribute of the span tag that contains icon classes. This text will appear as you bring the mouse over an icon.
For this demo, the tooltips will appear at the bottom of icons.
See online demo and code
The script:
<script type="text/javascript">
$(document).ready(function(){
$('[tool-tip-toggle="tooltip-demo"]').tooltip({
placement : 'bottom'
});
});
</script>
The markup:
<div class="container"> <div class="row"> <h2>Font awesome with tooltips</h2> <div class="col-md-6"> <a href="#"><span class="fa fa-spinner fa-spin fa-4x" tool-tip-toggle="tooltip-demo" data-original-title="Font awesome spin"></span></a> <a href="#"><span class="fa fa-camera-retro fa-4x" tool-tip-toggle="tooltip-demo" data-original-title="Camera icon"></span></a> <span class="fa fa-bar-chart fa-3x" tool-tip-toggle="tooltip-demo" data-original-title="A bar chart"></span> <a href="#"><span class="fa fa-barcode fa-5x" tool-tip-toggle="tooltip-demo" data-original-title="Bar code icon"></span></a> <a href="#"><span class="fa fa-calendar fa-3x" tool-tip-toggle="tooltip-demo" data-original-title="The Calendar"></span></a> <span class="fa fa-code fa-2x" tool-tip-toggle="tooltip-demo" data-original-title="Code"></span> </div> </div> </div> </div>
A demo with top placement in font awesome icons
Using the same markup as in above example, only the placement value is changed to the top position. Have a look:
See online demo and code
Only the script part is changed in this demo as below:
<script type="text/javascript">
$(document).ready(function(){
$('[tool-tip-toggle="tooltip-demo"]').tooltip({
placement : 'top'
});
});
</script>
That is, the placement option is assigned the top value. Similarly, you may use the left and right values for the tooltip to appear left and right, respectively.
A demo of tooltip in Bootstrap with Glyphicons
In this example, the glyph icons are used rather font-awesome icons. The same script is used for creating the tooltips as in above examples. The direction of displaying the tooltip is top:
See online demo and code
The jQuery script:
<script type="text/javascript">
$(document).ready(function(){
$('[tooltip-glyph="glyph-tooltip-demo"]').tooltip({
placement : 'top'
});
});
</script>
The markup used for glyph icons tooltips:
<div class="container"> <div class="row"> <div class="col-md-6"> <a href="#"><span class="glyphicon glyphicon-cloud icon-size" tooltip-glyph="glyph-tooltip-demo" data-original-title="cloud icon"></span></a> <a href="#"><span class="glyphicon glyphicon-facetime-video icon-size" tooltip-glyph="glyph-tooltip-demo" data-original-title="facetime video"></span></a> <span class="glyphicon glyphicon-step-backward icon-size" tooltip-glyph="glyph-tooltip-demo" data-original-title="step backward"></span> <a href="#"><span class="glyphicon glyphicon-fast-forward icon-size" tooltip-glyph="glyph-tooltip-demo" data-original-title="fast forward"></span></a> <a href="#"><span class="glyphicon glyphicon-chevron-left icon-size" tooltip-glyph="glyph-tooltip-demo" data-original-title="left icon"></span></a> <span class="glyphicon glyphicon-chevron-right icon-size" tooltip-glyph="glyph-tooltip-demo" data-original-title="right icon"></span> </div> </div> </div> </div>
The small CSS:
.icon-size{
font-size:3em;
}
That’s it!