In this example you will learn, how to add Bootstrap tooltip to an icon. You can place these icons inside the element either if you want to link it with something or perform some action with them. Let’s take a look at an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(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> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
