WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to add Bootstrap tooltip to an icon

Topic: Bootstrap / LessPrev|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:

<!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">
<script src="js/jquery-3.5.1.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>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.