<!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 getOrCreateInstance() Method
</
h4
>
<
div
class
=
"container mt-4 p-4"
>
<
button
type
=
"button"
class
=
"btn btn-success 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-success 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-danger"
id
=
"instanceBtn_1"
>
Get or create Instance of bottom Tooltip
</
button
>
<
button
type
=
"button"
class
=
"btn btn-danger ms-1"
id
=
"instanceBtn_2"
>
Get or create Instance of left Tooltip
</
button
>
</
div
>
<
script
>
document.addEventListener("DOMContentLoaded",
function () {
var btn_1 =
document.getElementById("instanceBtn_1");
var btn_2 =
document.getElementById("instanceBtn_2");
var element_1 =
document.getElementById("b-tooltip");
var element_2 =
document.getElementById("l-tooltip");
// Trigger the bottom tooltip only
var tooltip_1 =
new bootstrap.Tooltip(element_1);
// Get or Create tooltip instance on button click
btn_1.addEventListener("click", function () {
var tooltipInstance_1 = bootstrap
.Tooltip.getOrCreateInstance(element_1);
console.log(tooltipInstance_1);
});
// Get or Create tooltip instance on button click
btn_2.addEventListener("click", function () {
var tooltipInstance_2 = bootstrap
.Tooltip.getOrCreateInstance(element_2);
console.log(tooltipInstance_2);
});
});
</
script
>
</
body
>
</
html
>