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/core@2.11.6/dist/umd/popper.min.js"> 
	</script> 
	<script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"> 
	</script> 

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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

Comment

Explore