Bootstrap Tooltips getOrCreateInstance() method is used to obtain the instance of tooltips while the tooltips are being used. This method can work even when the instance is not pre-initialized and this method creates an instance if there isn't one available.
Syntax:
var tooltip-element =
document.getElementById("tooltip-id");
var tooltip-instance = bootstrap.Tooltip
.getOrCreateInstance(tooltip-element);
Parameters: This method accepts argument either an HTML element or its selector.
Return Value: This method returns the current Bootstrap 5 Tooltips instance to the caller. If no instance is yet created, it creates one.
Example 1: The code example below demonstrates how to implement the getOrCreateInstance() method using jQuery on Tooltips on the bottom and left. The bottom tooltip instance is pre-initialized and the other one gets initialized.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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>
Output:
Example 2: The code example below demonstrates how to implement the getOrCreateInstance() method using jQuery on Tooltips with anchor tags on the top and right. The top tooltips' instance is pre-initialized and the other one gets initialized.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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">
<a href="https://www.geeksforgeeks.org/"
id="t-tooltip"
data-bs-placement="top"
title="This is the Top placed tooltip">
Hover to open Top Tooltip
</a>
<a href="https://www.geeksforgeeks.org/"
class="ms-5"
id="r-tooltip"
data-bs-placement="right"
title="This is the Right placed tooltip">
Hover to open Right Tooltip
</a>
</div>
<div class="container mt-4 p-2">
<button type="button"
class="btn btn-danger"
id="instanceBtn_1">
Get or Create Instance of Top Tooltip
</button>
<button type="button"
class="btn btn-danger ms-4"
id="instanceBtn_2">
Get or Create Instance of Right Tooltip
</button>
</div>
<script>
$(document).ready(function () {
// Get first tooltip instance on button click
$("#instanceBtn_1").click(function () {
var tooltip_1 = bootstrap.
Tooltip.getOrCreateInstance($("#t-tooltip")[0]);
console.log(tooltip_1);
});
// Get second tooltip instance on button click
$("#instanceBtn_2").click(function () {
var tooltip_2 = bootstrap.
Tooltip.getOrCreateInstance($("#r-tooltip")[0]);
console.log(tooltip_2);
});
});
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#getorcreateinstance
