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" crossorigin="anonymous">
Bootstrap JS:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 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:
OutputAligning 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
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing