How to add Bootstrap tooltip to an icon

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:

Previous Page Next Page

How to add Bootstrap tooltip to an icon

Answer: Use the Bootstrap .tooltip() method

Example

Related FAQ

About Us

Contact

Interactive Tools

Answer: Use the Bootstrap `.tooltip()` method