Bootstrap 5 Tooltips show() Method
Last Updated :
22 Dec, 2022
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 =
</ script >
< script src =
</ script >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "container text-center" >
< div class = "mt-5" >
< h3 class = "text-success" >
GeeksforGeeks
</ 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 GeeksforGeeks" >
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 =
</ script >
< script src =
</ script >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "container text-center" >
< div class = "mt-5" >
< h3 class = "text-success" >
GeeksforGeeks
</ 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 GeeksforGeeks" >
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
Share your thoughts in the comments
Please Login to comment...