Bootstrap 5 Modal Tooltips and Popovers
Last Updated :
23 Jul, 2025
Bootstrap 5 provides a robust way to enhance user interfaces through modals, tooltips, and popovers. These components help in displaying additional information to users without cluttering the main content. Tooltips offer brief descriptions, while popovers can contain more detailed information. Both are highly useful in guiding users through the modal's content efficiently.
When a modal is opened, any tooltips and popovers initialized within it are dynamically attached to provide contextual help. Once the modal is closed, Bootstrap automatically handles the cleanup by closing any visible tooltips and popovers. This ensures a clean and seamless user experience without leaving behind any open elements, which could potentially confuse users.
Bootstrap 5 Modal Tooltips and popovers Classes: There are no specific classes for using the tooltips and popovers inside the Modal. It uses a combination of data attributes and JavaScript to trigger these features. By adding `data-bs-toggle="tooltip"` or `data-bs-toggle="popover"` to an element, you can easily enable these interactive components within a modal.
Syntax:
<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<!-- Button with Tooltip -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip Text Here">
Hover the Button
</button>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Example 1: The below example illustrates the use of the tooltips inside the modal component.
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>GeeksforGeeks - Bootstrap 5</title>
<!-- Bootstrap Javascript -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>
Bootstrap 5 Modal Tooltips and Popovers
</strong>
</div>
<div class="modal fade" id="gfg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">
GeeksforGeeks Modal With Tooltip
</h1>
</div>
<div class="modal-body">
GeeksforGeeks is a computer science portal for
the geeks. Here you can cosume computer science
related content or share your knowledge with
the world by contributing on the write portal.
<button
type="button"
id="tooltip1"
class="btn btn-secondary mt-4"
data-bs-toggle="tooltip"
title="Welcome to GeeksforGeeks">
Hover for the tooltip
</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success mt-4"
onclick="showModal()">
Show Modal
</button>
</div>
<script>
//Enabling the tooltip
bootstrap.Tooltip.getOrCreateInstance("#tooltip1")
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script>
</body>
</html>
Output:
Example 2: In this example, we used both the tooltip and the popover inside our bootstrap 5 modal.
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>GeeksforGeeks - Bootstrap 5</title>
<!-- Bootstrap Javascript -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Modal Tooltips and Popovers</strong>
</div>
<div class="modal fade" id="gfg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">
GeeksforGeeks Modal With Tooltip and Popover
</h1>
</div>
<div class="modal-body">
<button
type="button"
id="popover1"
class="btn btn-success mb-4"
data-bs-toggle="popover"
title="Hello Geeks!"
data-bs-content="Welcome Home">
Click for Popover
</button>
<p>
GeeksforGeeks is a computer science portal for
the geeks. Here you can cosume computer science
related content or share your knowledge with
the world by contributing on the write portal.
</p>
<button
type="button"
id="tooltip1"
class="btn btn-secondary mt-4"
data-bs-toggle="tooltip"
title="Welcome to GeeksforGeeks">
Hover for the tooltip
</button>
</div>
</div>
</div>
</div>
<button class="btn btn-danger mt-4" onclick="showModal()">
Show Modal With tooltip and Popover
</button>
</div>
<script>
//Enabling the tooltip
bootstrap.Tooltip.getOrCreateInstance("#tooltip1");
// Enabling the popover
bootstrap.Popover.getOrCreateInstance("#popover1");
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script>
</body>
</html>
Output:
Tooltips and popovers are valuable additions to Bootstrap 5 modals, offering users helpful information without cluttering the interface. By using Bootstrap's data attributes and JavaScript, you can easily implement these features to create a more interactive and user-friendly experience. Ensure accessibility and thoughtful placement for optimal usability.
Reference: https://getbootstrap.com/docs/5.2/components/modal/#tooltips-and-popovers
Similar Reads
Bootstrap 5 Modal Components A website can have dialogues added for lightboxes, user notifications, or entirely unique content by using Bootstrap modals. A modal is made up of components like the dialog, content, header, title, body, and footer. A modal can be used to implement a lot of utilities like showing a message or poppi
4 min read
Bootstrap 5 Modal Live demo Bootstrap 5 Modal live demo demonstrates the toggle of a working modal by clicking a button that opens a modal. The modal content slides down but fades in from the top after the toggle action. Different components are assembled together to create a Modal. Modals can be triggered using the data attri
3 min read
Bootstrap 5 Modal Static backdrop Bootstrap 5 Modal Static backdrop facilitates the modal that will not be going to be closed while clicking outside of the modal, by setting the backdrop to static. Modal Static backdrop Classes: There are no specific classes used in Modal Static backdrop. Although, we can create the modal using Moda
2 min read
Bootstrap 5 Modal Scrolling long content Bootstrap 5 Modal Scrolling long content is used when modal body content becomes very large then it becomes scrollable. Modals can either be scrolled independently of the page or we can scroll the modal body. We will learn about them using examplesSyntax:<div class="modal-dialog modal-dialog-scro
2 min read
Bootstrap 5 Modal Vertically Centered Bootstrap 5 Modal Vertically Centered is used to make the modal centered aligned. Modals are positioned over everything else in the document and the scroll gets removed from the <body> so that modal content scrolls instead. Using bootstrap modal classes we can make the modal body align vertica
3 min read
Bootstrap 5 Modal Tooltips and Popovers Bootstrap 5 provides a robust way to enhance user interfaces through modals, tooltips, and popovers. These components help in displaying additional information to users without cluttering the main content. Tooltips offer brief descriptions, while popovers can contain more detailed information. Both
4 min read
Bootstrap 5 Modal Using the Grid Bootstrap 5 Modal Using the grid can add content which can be anything from text to images to anything we want. We can also create layouts inside a modal too, Grid System being one of the main tools for creating responsive layout modals. So we can add different settings and variations of the Grid Sy
3 min read
Bootstrap 5 Varying Modal Content Bootstrap 5 Modal Content can be varied by passing the value which needed to be accessed in the modal to a data-bs-* (where * can be anything you like) attribute of the triggering button. The value passes to the modal can be accessed using JavaScript and can be used in the modal content. Bootstrap 5
4 min read
Bootstrap 5 Toggle Between Modals Bootstrap 5 Toggle Between Modals is used to switch between modals, this does not mean there can be multiple opened modals, only one modal at a time can be opened, by using this feature we can trigger the other modal that will replace the current modal content with the new ones.Bootstrap 5 Toggle be
3 min read
Bootstrap 5 Modal Change Animation Bootstrap 5 Modal Change animation facilitates several variables that determine the animation transformation state of the modal, along with setting the zoom-in & zoom-out animation for the modal. The Modal opens with a fade-in animation when it is triggered using a button, although, this animati
4 min read