How to change color of tooltip element using Bootstrap ?
Last Updated :
20 Jan, 2023
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/[email protected]/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=
"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/[email protected]/dist/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
</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:
Similar Reads
How to change font style on element using Bootstrap 5? Bootstrap enables changing font styles by applying predefined classes like .fw-bold for bold, .fst-italic for italic, etc., directly to HTML elements. This ensures consistent and responsive typography across web applications without needing custom CSS. There are a few Bootstrap Built-in Classes for
2 min read
How to create a bootstrap tooltip using jQuery ? Tooltip is like a balloon or also a small screen tip that displays text descriptions to any object in a webpage. A tooltip is displayed when the user hovers over an object using the cursor. It is a very useful part of a website and now can be found in almost all websites including some web applicati
4 min read
How to change Hamburger Toggler color in Bootstrap ? Changing the Hamburger Toggler color in Bootstrap refers to customizing the color of the toggle button icon used in responsive navigation menus. This involves altering the default styles of the toggler using CSS to match the design requirements, enhancing the visual appearance and brand consistency.
4 min read
How to add tooltip to an icon using Bootstrap ? 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.
2 min read
How to Position Tooltip in button using Bootstrap ? In Bootstrap 4, you can position the tooltip in various directions (left, right, top, bottom). The positioning of the tooltip is set by using the third-party library (Popper.js) before bootstrap.js in order for the tooltip to work. Approach: The required markup for positing tooltip is on data-placem
3 min read
How to change the width and height of Twitter Bootstrap's tooltips? Bootstrap tooltip: A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. Standardized bootstrap element collection like a small pop-up which appears whenever user performs any specific action click, hover(default), and focus on that e
2 min read