<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
class
=
"container text-center"
>
<
h1
class
=
"m-4 text-success"
>
GeeksforGeeks
</
h1
>
<
h4
class
=
"ms-4"
>
Bootstrap 5 Tooltips Usage() Methods
</
h4
>
<
div
class
=
"container mt-4 p-4"
>
<
button
type
=
"button"
class
=
"btn btn-primary ms-5 me-5"
id
=
"b-tooltip"
data-bs-placement
=
"bottom"
title
=
"This is a Tooltip on Bottom"
>
Bottom Tooltip
</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary ms-5 me-5"
id
=
"l-tooltip"
data-bs-placement
=
"left"
title
=
"This is a Tooltip on Left"
>
Left Tooltip
</
button
>
</
div
>
<
div
class
=
"container mt-4 p-2"
>
<
button
type
=
"button"
class
=
"btn btn-success"
id
=
"instanceTogBtn"
>
Get Instance and toggle of bottom Tooltip
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger ms-1"
id
=
"instanceDisBtn"
>
Get Instance and dispose of left Tooltip
</
button
>
</
div
>
<
script
>
document.addEventListener("DOMContentLoaded",function () {
var btn_1 =
document.getElementById("instanceTogBtn");
var btn_2 =
document.getElementById("instanceDisBtn");
var element_1 =
document.getElementById("b-tooltip");
var element_2 =
document.getElementById("l-tooltip");
// Trigger instance of the two tooltips
var tooltip_b =
new bootstrap.Tooltip(element_1);
var tooltip_l =
new bootstrap.Tooltip(element_2);
// Get First tooltip instance and toggle on button click
btn_1.addEventListener("click", function () {
var tooltipInstance_1 =
bootstrap.Tooltip.getInstance(element_1);
console.log(tooltipInstance_1);
tooltipInstance_1.toggle();
});
// Get Second tooltip instance and dispose on button click
btn_2.addEventListener("click", function () {
var tooltipInstance_2 =
bootstrap.Tooltip.getInstance(element_2);
console.log(tooltipInstance_2);
tooltipInstance_2.dispose();
console.log(tooltipInstance_2);
});
});
</
script
>
</
body
>
</
html
>