Bootstrap button tooltip example
May 17, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, you will learn how to create button tooltip in Bootstrap.
Creating the Tooltips with Bootstrap
A tooltip is a small pop up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.
Tooltips can be very helpful for the new visitors of your website because they enable the user to know the purpose of icons and links by placing the mouse pointer over them.
Table of contents
- Adding the tooltip markup
- Enabling the tooltips
- Includes bootstrap view
- Includes bootstrap library
- Includes css in html page
- Define its class name
- Add JavaScript in
<script>tag
Step 1: Adding the tooltip markup
To create a tooltip, you need to add the data-bs-toggle="tooltip" attribute to an element. Tooltip text that would display on hover can be specified using the title attribute.
Here is the standard markup for adding a tolltip to a hyperlink.
<a href="#" data-bs-toggle="tooltip" title="Some text">Hover over me</a>Step 2: Enabling the tooltips
Tooltips can be enabled via JavaScript — just call the tooltip() Bootstrap method with the id, class or any CSS selector of the target element in your JavaScript code.
You can either initialize tooltips individually or all in one go. The following jQuery code will initialize all tooltips on the page by selecting them by their data-bs-toggle attribute.
Step 3: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1" />Step 4: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Step 5: Includes css in html page
<style>
.bs-example{
margin: 60px 0;
}
a, button{
margin-right: 30px;
}
i{
font-size: 22px;
}
</style>Step 6: Define its class name
After that, create the button tooltip with a class name .data-bs-toggle.
<h2>Tooltips on Buttons</h2>
<div class="bs-example">
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" title="Default tooltip">Tooltip</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" title="Another tooltip">Another tooltip</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width of the Bootstrap tooltip.">Large tooltip</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="The last tip!">Last tooltip</button>
</div>Step 7: Add JavaScript in <script> tag
Add the following JavaScript in <script> tag after the <body> tag to specify button tooltip.
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip();
});Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tooltips via jQuery</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.bs-example{
margin: 60px 0;
}
a, button{
margin-right: 30px;
}
i{
font-size: 22px;
}
</style>
<script>
$(document).ready(function(){
$('[data-bs-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<h2>Tooltips on Buttons</h2>
<div class="bs-example">
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" title="Default tooltip">Tooltip</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" title="Another tooltip">Another tooltip</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width of the Bootstrap tooltip.">Large tooltip</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="The last tip!">Last tooltip</button>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍
