How to add Bootstrap tooltip to an icon
Topic: Bootstrap / SassPrev|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. Let's take a look at an example:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding Bootstrap Tooltip to Icons</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
placement : 'top'
});
});
</script>
</head>
<body>
<div class="m-5">
<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>
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
