Bootstrap 5 Modal Tooltips and Popovers
Bootstrap 5 Modal Tooltips and Popovers can be used to display additional information to the users about the modal content. When an opened modal is closed, all the opened tooltips and popovers inside the modal are also closed.
Bootstrap 5 Modal Tooltips and popovers Classes: There are no specific classes for using the tooltips and popovers inside the Modal. We can take combinations of classes to create modal tooltips and popovers.
Syntax:
<div class="modal"> <div class="modal-dialog"> <div class="modal-content"> ... <div class="modal-body"> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="..."> Hover the Button </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 >w3wiki - 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" >w3wiki</ 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" > w3wiki Modal With Tooltip </ h1 > </ div > < div class = "modal-body" > w3wiki is a computer science portal for the Beginner. 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 w3wiki" > 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 >w3wiki - 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" >w3wiki</ 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" > w3wiki 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 Beginner!" data-bs-content = "Welcome Home" > Click for Popover </ button > < p > w3wiki is a computer science portal for the Beginner. 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 w3wiki" > 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:
Reference: https://getbootstrap.com/docs/5.2/components/modal/#tooltips-and-popovers
Contact Us