Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Bootstrap Glyphicons with Tooltip</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip({ placement : 'top' }); }); </script> <style> .bs-example{ margin: 50px; } .bs-example a{ font-size: 22px; text-decoration: none; margin: 0 10px; } </style> </head> <body> <div class="bs-example"> <a href="#"><span class="fa fa-share" data-toggle="tooltip" data-original-title="Share"></span></a> <a href="#"><span class="fa fa-edit" data-toggle="tooltip" data-original-title="Edit"></span></a> <a href="#"><span class="fa fa-download" data-toggle="tooltip" data-original-title="Download"></span></a> <a href="#"><span class="fa fa-repeat" data-toggle="tooltip" data-original-title="Refresh"></span></a> <a href="#"><span class="fa fa-filter" data-toggle="tooltip" data-original-title="Filter"></span></a> <a href="#"><span class="fa fa-gear" data-toggle="tooltip" data-original-title="Setting"></span></a> <p class="mt-4"><strong>Note:</strong> Place mouse pointer over icons to reveal the tooltip.</p> </div> </body> </html>
