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...