Open In App

How to add tooltip to an icon using Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to add tooltip element to an icon using Bootstrap. A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage.

Now, let’s learn how to create a tooltip element to an icon element using the Bootstrap framework.

Step 1: First import all the Bootstrap CDN for Bootstrap CSS and JavaScript from the Bootstrap official website, jQuery CDN Lin, and Popper CDN Link.  

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script>

Step 2: We will create an element with an icon and its tooltip value.

<div class="fa fa-bars text-success" 
data-toggle="tooltip" 
   data-original-title="Responsive Navigation Bar">
</div>

Step 3: Now, we will use jQuery Code to add a tooltip to the icon element and add its placement position.

<script>
   $(document).ready(function () {
       $('[data-toggle="tooltip"]').tooltip({
           placement: 'bottom'
       });
   });
</script>

Example: In this example, we will add the tooltip element to an icon element using Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to add tooltip to an icon using Bootstrap?
    </title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
      </script>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .icons .fa {
            width: 50px;
            height: 50px;
            font-size: 50px;
        }
          
    </style>
</head>
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>
            How to add tooltip to an 
            icon using Bootstrap?
        </h3>
        <div class="icons">
            <div class="fa fa-bars text-success" 
                data-toggle="tooltip" 
                data-original-title="Responsive Navigation Bar">
            </div>
            <div class="fa fa-file text-danger" 
                data-toggle="tooltip" 
                data-original-title="Open File">
            </div>
            <div class="fa fa-barcode text-primary" 
                data-toggle="tooltip" 
                data-original-title="Scan Barcode">
            </div>
            <div class="fa fa-folder text-warning" 
                data-toggle="tooltip" 
                data-original-title="Open Folder">
            </div>
            <div class="fa fa-gear text-white bg-success" 
                data-toggle="tooltip" 
                data-original-title="Open Setting">
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip({
                placement: 'bottom'
            });
        });
    </script>
</body>
</html>


Output:

 



Last Updated : 07 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads