How to create a bootstrap tooltip using jQuery ?
Last Updated :
02 Aug, 2024
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 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 and jQuery.
What is jQuery?
jQuery is a JavaScript library that makes the manipulation of the HTML DOM (Document Object Model) properties very easily. So let’s start.
Step 1: First import all the Bootstrap CDN for Bootstrap CSS from the Bootstrap official website.
Bootstrap CSS:
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
Bootstrap JS:
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js” integrity=”sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”></script>
Step 2: Import the jQuery link to the HTML file from the official jQuery CDN website.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”> </script>
Step 3: 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.
<button type=”button” id=”tooltip” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”bottom” title=”Tooltip on bottom”> Tooltip on bottom </button>
(Here 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 4: After that, add the jQuery piece of code to the HTML file given below inside the script tag:
<script>
$(document).ready(function(){
let tool = $("#tooltip");
let tooltip = new bootstrap.Tooltip(tool, {
boundary: "window",
});
});
</script>
Here in the above code, we use the Tooltip() function to make the tooltip trigger on mouse hover.
Note: Here we have made the tooltip text placement in the bottom, you can place it on left, right or top using the “data-bs-placement” attribute. Here, we have set it to “bottom”.
Step 5: Thus, we have successfully created the tooltip in Bootstrap using jQuery.
Here is the Full HTML code :
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" />
<title>How to Create a Bootstrap Tooltip Using jQuery</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"/>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
.tooltip-btn {
margin: 20px;
padding: 10px 20px;
background-color: #2f8d46;
border: none;
color: white;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.tooltip-btn:hover {
background-color: #247535;
}
</style>
</head>
<body>
<button type="button" id="tooltip" class="tool tooltip-btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</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 src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
let tool = $("#tooltip");
let tooltip = new bootstrap.Tooltip(tool, {
boundary: "window",
});
});
</script>
</body>
</html>
Output:
Output
Aligning Tooltip
Now, after that, we can also define the direction of the tooltip message on 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. There are four placement options available with it. They are:
1. Top – to place the tooltip on the top of the object.
Syntax:
<button type=”button” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”top” title=”…”> … </button>
2. Bottom – to place the tooltip on the bottom of the object.
Syntax:
<button type=”button” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”bottom” title=”…”> … </button>
3. Left – to place the tooltip on the left of the object.
Syntax:
<button type=”button” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”left” title=”…”> … </button>
4. Right – to place the tooltip on the right of the object.
Syntax:
<button type=”button” class=”btn btn-secondary” data-bs-toggle=”tooltip” data-bs-placement=”bottom” title=”…”> … </button>
Similar Reads
How to Create Link Tooltip Using CSS3 and jQuery ?
Link tooltips are a great way to display extra information when an element or link is hovered on. There are several ways to do this. Using CSS and jQuery: The mousenter and mouseleave events are used in jQuery to perform this operation. <!DOCTYPE html> <html> <head> <style> .
2 min read
How to Create Modal using Bootstrap?
Bootstrap modal box is a UI component that displays content overlaid on the main page. Create it by defining a trigger button with data attributes and structuring the modal in HTML with a unique ID, allowing customization of content and functionality. Syntax: <div class="modal"> Contents...
4 min read
How to create a Tooltip popup using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Tooltip popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†href
1 min read
How to make Tooltip using Angular UI Bootstrap ?
In this article we will see how to make Dropdown using Angular UI bootstrap. Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing better UI which can be used easily. Syntax: <div uib-tooltip></div> Download AngularUI from the link: https://angula
2 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 create multi step progress bar using Bootstrap ?
In this article, we will create a multi-step progress bar using Bootstrap. In addition to Bootstrap, we will use jQuery for DOM manipulation. Progress bars are used to visualize the quantity of work that's been completed. The strength of the progress bar indicates the progress of the work. It is gen
4 min read
How to change color of tooltip element using Bootstrap ?
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
2 min read
What is a tooltip and how to create it in Bootstrap ?
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 Ado
3 min read
How to create chart using bootstrap ?
A chart in Bootstrap is a graphical representation for data visualization, in which the data is represented by symbols. The various types of charts like bar charts, line charts, pie charts, donut charts, etc are created with the help of Bootstrap. In other words, we can say that chart is a type of d
3 min read
How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
The Bootstrap Tooltip gives us a hint about the specific element in a graphical manner. Tooltip is used for performance reasons so it can be customized as per the requirement domain. Tooltip is implemented using javascript, it relies on a 3rd party library known as popper.js for positioning purposes
3 min read