Q:

How to add Bootstrap tooltip to an icon

mhmadesk
Save to bookmark
|
2022-05-19
|
  158 
Very Easy
0

How to add Bootstrap tooltip to an icon

Bootstrap,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-19
need an explanation for this answer? contact us directly to get an explanation for this 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 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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

BOOTSTRAP / SASS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to add an icon to input submit button in Boots... >>
<< How to open Bootstrap dropdown menu on hover rathe...