What is a tooltip and how to create it in Bootstrap ?
Last Updated :
21 Oct, 2021
A Tooltip is like a balloon or also a small screen tip that displays text description to any object. 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 applications like Adobe Photoshop, Adobe Illustrator, and many more. A tooltip is very helpful for new users, where the user can learn about the object by reading the tooltip text.
Now, having understood the basic concept of the tooltip, let’s learn how to create a tooltip using the Bootstrap framework.
Creating a Tooltip in Bootstrap:
Step 1: First import all the Bootstrap CDN for Bootstrap CSS and JavaScript from the Bootstrap official website.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
Step 2: To create a tooltip, we have to add the ‘data-bs-toggle’ attribute to any element, and to add the text that needs to be displayed when the tooltip hovers, we have to add the ‘title’ attribute to the HTML element. We can also define the direction of the tooltip message in different directions like bottom, top, left, right, etc. To align the tooltip to different positions, we need the ‘data-bs-placement’ attribute to the bootstrap object.
HTML
<button type="button"
class=" tooltip btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip on top">
Tooltip on top
</button>
We have used buttons to show the tooltips effect, but, you can use tooltips with other bootstrap components too. The process is very same.
Step 3: Add the JavaScript piece of code to the HTML file given below. We use the Tooltip() function to make the tooltip trigger on mouse hover. We have used the forEach() loop to add the tooltip options to all the objects having the tooltip. You may also add the tooltip to each individual object in the HTML file.
JavaScript
<script>
const tooltips = document.querySelectorAll(".tooltip");
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
Step 4: We have successfully created the tooltip in Bootstrap.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<br>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Tooltip on top">
Tooltip on top
</button>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Tooltip on right">
Tooltip on right
</button>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button"
class="tool btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
<!-- Bootstrap JavaScript -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous">
</script>
<script>
const tooltips = document.querySelectorAll(".tool");
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
</body>
</html>
Output:
Note: We have shown the example with the button component, you can apply it to other components like Paragraphs, icons too.
Similar Reads
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 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 create a rounded table in Bootstrap 5?
Bootstrap 5 provides various classes that can be used for styling the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn How to create a rounded table in Bootstrap 5. Here we use two differen
2 min read
How to create warning notification alerts in Bootstrap ?
Before or after performing an action, we frequently encounter specific notifications on some websites. These alert messages are highlighted text that should be taken into account when executing a task. Using preset classes in Bootstrap, these alert messages can be displayed on the website.Approach:
3 min read
How to set position of tooltip in a button in Bootstrap ?
A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when the user mouse moves over it, the additional information "A computer Science Portal" popup will display. We are g
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
How to Create Alerts in Bootstrap ?
Bootstrap Alerts offer a simple method for crafting predefined messages, enhancing their appeal to users. They streamline message display, adding style for increased engagement and improved user experience by presenting important information effortlessly and appealingly.Syntax:<div class="alert a
3 min read
How to Create "Add to cart" Button in Bootstrap?
Creating an "Add to Cart" button in Bootstrap is simple and helps improve the shopping experience on your website. Bootstrap has ready-made styles that make it easy to create buttons that look good and work well on all devices.Approach to creating an "Add to cart" Button in BootstrapUse a Bootstrap
2 min read
How to create a web page using Bootstrap ?
Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for
6 min read