How to Add Bootstrap Tooltips on Glyph icons and Font-Awesome

Adding tooltips in icons

In the Bootstrap tooltip tutorial, I have shown you how to create 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 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.

bootstrap tooltip icon

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:

bootstrap tooltip icon

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 the tooltip in Bootstrap with Glyphicons

In this example, the glyph icons are used rather than font-awesome icons. The same script is used for creating the tooltips as in above examples. The direction of displaying the tooltip is top:

bootstrap tooltip glyph icons

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!

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️