Bootstrap 5 Tooltips show() Method
Bootstrap 5 Tooltip is a UI element that shows some extra information when the user hovers over or focuses on a tooltip-enabled element. The Tooltip show() method is used to show an element’s tooltip. The Tooltip having the zero title length will not be visible.
Syntax:
const tooltip = new bootstrap.Tooltip(document.getElementById('tooltip-id')); tooltip.show();
Parameters: This method does not accept any parameter.
Return Value: This method returns to the caller before the tooltip has been revealed to the front end.
Example 1: In this example, we used the show() method to reveal the tooltip of an element.
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"> < 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 > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" /> </ head > < body > < div class = "container text-center" > < div class = "mt-5" > < h3 class = "text-success" > w3wiki </ h3 > < h4 >Bootstrap 5 Tooltips show() Method</ h4 > </ div > < a id = "tt" class = "btn d-block mt-5" href = "#" data-bs-toggle = "tooltip" data-bs-title = "Welcome to w3wiki" > Hover or Click Button for Tooltip </ a > < button class = "btn btn-danger mt-3" onclick = "showTooltip()" > Show Tooltip </ button > < script > const mytt = document.getElementById('tt'); const tooltip = new bootstrap.Tooltip(mytt); function showTooltip() { tooltip.show(); } </ script > </ div > </ body > </ html > |
Output:
Example 2: In this example, we used the tooltip’s show() method along with the hide() method to show/hide the tooltip.
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"> < 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 > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" /> </ head > < body > < div class = "container text-center" > < div class = "mt-5" > < h3 class = "text-success" > w3wiki </ h3 > < h4 >Bootstrap 5 Tooltips show() Method</ h4 > </ div > < a id = "tt" class = "btn d-inline-block mt-5" href = "#" data-bs-toggle = "tooltip" data-bs-title = "Welcome to w3wiki" > Hover or Click Button for Tooltip </ a >< br > < button class = "btn btn-danger mt-3" onclick = "showTooltip()" > Show Tooltip </ button > < button class = "btn btn-success mt-3" onclick = "showTooltipAndHideAfter3Seconds()" > Show Tooltip And Hide After 3 Seconds </ button > < script > const mytt = document.getElementById('tt'); const tooltip = new bootstrap.Tooltip(mytt); function showTooltip() { tooltip.show(); } function showTooltipAndHideAfter3Seconds() { tooltip.show(); setTimeout(() => { tooltip.hide(); }, 3000); } </ script > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#show