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 =
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 >
|
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 =
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" >
id = "t-tooltip" data-bs-placement = "top"
title = "This is the Top placed tooltip" >
Hover to open Top Tooltip
</ a >
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