Bootstrap Tooltip
A tooltip is a small message that appears when you hover, focus, or tap on an element (like a button or link). It helps users understand more about something without showing extra text on the screen.
1. Basic Tooltip
Example Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Basic Tooltip</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<button type=”button” class=”btn btn-secondary” data-toggle=”tooltip” data-placement=”top” title=”Tooltip on top”>
Hover over me
</button>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Activate all tooltips
});
</script>
</body>
</html>
Output:
Explanation:
.data-toggle=”tooltip” → Enables the tooltip.
.title → Text shown inside the tooltip.
.data-placement=”top” → Position of tooltip (can also be bottom, left, or right).
.jQuery code is needed to start the tooltip.
2. Tooltip with HTML Content
Example Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>HTML Tooltip</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<a href=”#” data-toggle=”tooltip” data-html=”true” title=”<em>Italic</em> <u>Underline</u> <b>Bold</b> text”>
Hover over me
</a>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Activate tooltips
});
</script>
</body>
</html>
Output:
Explanation:
.data-html=”true” → Allows HTML tags inside the tooltip.
.Now you can style the text using <b>, <i>, <u>, etc.
3. Custom Tooltip Color
Example Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Custom Color Tooltip</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js”></script>
<style>
.tooltip.custom-tooltip .tooltip-inner {
background-color: #5cb85c; /* Green */
color: #fff; /* White text */
}
.tooltip.custom-tooltip .arrow::before {
border-top-color: #5cb85c; /* Arrow color */
}
</style>
</head>
<body>
<button type=”button” class=”btn btn-default” data-toggle=”tooltip” data-placement=”top”
title=”Custom color tooltip”
data-template='<div class=”tooltip custom-tooltip” role=”tooltip”><div class=”arrow”></div><div class=”tooltip-inner”></div></div>’>
Hover over me
</button>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Activate tooltips
});
</script>
</body>
</html>
Output:
Explanation:
.Custom styles are added using .custom-tooltip.
.data-template lets you apply your own HTML structure and custom classes.
4. Tooltip with Show/Hide Delay
Example Code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Tooltip Delay</title>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css”>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<button type=”button” class=”btn btn-info”
data-toggle=”tooltip”
data-placement=”right”
title=”I take time to show”
data-delay='{“show”:”500″, “hide”:”100″}’>
Hover over me
</button>
<script>
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip(); // Activate tooltips
});
</script>
</body>
</html>
Output:
Explanation:
.data-delay sets how long it takes for tooltip to appear and disappear.
.In this example, it appears after 500ms and hides after 100ms.
Conclusion:
Bootstrap tooltips are great for:
.Showing extra info in a clean way.
.Avoiding extra text on the screen.
.Being styled and timed as per your need.
Practice Scenarios
Scenario 1: Create a button with a tooltip on the left.
Objective:<button type=”button” class=”btn btn-primary” data-toggle=”tooltip” data-placement=”left” title=”Left tooltip”>
Hover me
</button>
Expected Output:
Scenario 2: Create a link with bold and red text inside a tooltip.
Objective:<a href=”#” data-toggle=”tooltip” data-html=”true” title=”<b style=’color:red;’>Red Bold Text</b>”>
Hover on this
</a>
Expected Output:
A Bootstrap tooltip is a small pop-up box that displays additional information when a user hovers over or focuses on an element.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Add the data-bs-toggle="tooltip" attribute to an element and initialize it using Bootstrap’s JavaScript or jQuery.
Yes, tooltips can be customized with custom CSS or JavaScript for different styles and behaviors.
Examples include tooltips with different positions (top, right, bottom, left), dynamic tooltips, and styled tooltips.
Yes, Bootstrap tooltips are responsive and adapt to different screen sizes.
Use JavaScript methods like bootstrap.Tooltip.getInstance(element) to control tooltip behavior.
Tooltips provide short, contextual information, while popovers are more complex and can contain additional HTML elements.
Yes, you can enable HTML in tooltips by setting the data-bs-html="true" attribute.
Customize tooltips using CSS or by overriding Bootstrap’s default styles with custom classes.
