How to add Bootstrap tooltip to an icon

Topic: Bootstrap / Less« Prev|Next »

Answer: Use the Bootstrap .tooltip() method

You can apply Bootstrap tooltip on Glyphicons like you do on other elements. First of all add the data attributes data-toggle="tooltip" and data-original-title="Text" to the icon elements and finally initialize the tooltips using the Bootstrap's .tooltip() method.

Further, you can also place these icons inside the <a> element either if you want to link it with something or perform some action with them.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Adding Bootstrap Tooltip to Glyphicons</title>
  • <link rel="stylesheet" href="css/bootstrap.min.css">
  • <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  • <script src=""></script>
  • <script src="js/bootstrap.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('[data-toggle="tooltip"]').tooltip({
  •         placement : 'top'
  •     });
  • });
  • </script>
  • </head> 
  • <body>
  •     <div>
  •         <a href="#"><span class="glyphicon glyphicon-share" data-toggle="tooltip" data-original-title="Share"></span></a>
  •         <a href="#"><span class="glyphicon glyphicon-edit" data-toggle="tooltip" data-original-title="Edit"></span></a>
  •         <a href="#"><span class="glyphicon glyphicon-download" data-toggle="tooltip" data-original-title="Download"></span></a>
  •         <a href="#"><span class="glyphicon glyphicon-repeat" data-toggle="tooltip" data-original-title="Refresh"></span></a>
  •         <a href="#"><span class="glyphicon glyphicon-filter" data-toggle="tooltip" data-original-title="Filter"></span></a>
  •         <a href="#"><span class="glyphicon glyphicon-cog" data-toggle="tooltip" data-original-title="Setting"></span></a>
  •     </div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:


Your Feedback:


We would love to hear from you! Please say something.