bootstrap tutorial - How to add Bootstrap tooltip to an icon - bootstrap examples - bootstrap templates - bootstrap 3
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 - Wikitechy</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 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>