Open In App

How to change color of tooltip element using Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to change the color of the tooltip element 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 and change its color using the Bootstrap framework. 

Step 1: First import all the Bootstrap CDN for Bootstrap CSS and JavaScript from the Bootstrap official website, jQuery CDN Link, 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 tooltip to the icon element and add its placement position.

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

Step 4: At last, we will add CSS styles on tooltip element to change the color of the tooltip element.

<style>
.tooltip-inner {
    background-color: green !important;
    color: #fff ;
}

.bs-tooltip-bottom .arrow::before, 
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: green !important;
}
</style>

Example: In this example, we will create the colored tooltip element on the icon elements.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to change the color of tooltip
        element using Bootstrap?
    </title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .icons .fa {
            width: 50px;
            height: 50px;
            font-size: 50px;
        }
         
        .tooltip-inner {
            background-color: green !important;
            color: #fff ;
        }
 
        .bs-tooltip-bottom .arrow::before,
        .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
            border-bottom-color: green !important;
        }
    </style>
</head>
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>
            How to change the color of tooltip
            element 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 : 20 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads