Bootstrap Tooltips getInstance() Method is used to obtain the instance of tooltips while the tooltips are being used. This method can only work after the instance is pre-initialized. The tooltip instance linked to a DOM element may be obtained using this static function.
Syntax:
var tooltip-element = document.getElementById("tooltip-id"); var tooltip-instance = bootstrap .Tooltip.getInstance(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.
Example 1: The code example below demonstrates how to implement the getInstance() method using JavaScript on Tooltips on top and right.
<!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 getInstance() Method
</ h4 >
< div class = "container mt-4 p-4" >
< button type = "button"
class = "btn btn-success ms-5 me-5" id = "t-tooltip" data-bs-placement = "top"
title = "This is a Tooltip on Top" >
Top Tooltip
</ button >
< button type = "button" class = "btn btn-success ms-5 me-5" id = "r-tooltip" data-bs-placement = "right"
title = "This is a Tooltip on Right" >
Right Tooltip
</ button >
</ div >
< div class = "container mt-4 p-2" >
< button type = "button" class = "btn btn-danger" id = "instanceBtn_1" >
Get Instance of top Tooltip
</ button >
< button type = "button" class = "btn btn-danger ms-1" id = "instanceBtn_2" >
Get Instance of right 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("t-tooltip");
var element_2 =
document.getElementById("r-tooltip");
// Trigger the tooltip
var tooltip_1 =
new bootstrap.Tooltip(element_1);
var tooltip_2 =
new bootstrap.Tooltip(element_2);
// Get tooltip instance on button click
btn_1.addEventListener("click", function () {
var tooltipInstance_1 =
bootstrap.Tooltip.getInstance(element_1);
console.log(tooltipInstance_1);
});
// Get tooltip instance on button click
btn_2.addEventListener("click", function () {
var tooltipInstance_2 =
bootstrap.Tooltip.getInstance(element_2);
console.log(tooltipInstance_2);
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: The code example below demonstrates how to implement the getInstance() method using JQuery on Tooltips with anchor tags on the bottom and left.
<!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 getInstance() Method
</ h4 >
< div class = "container mt-4 p-4" >
< a href =
id = "b-tooltip"
data-bs-placement = "bottom"
title = "This is the Bottom placed tooltip" >
Hover to open Bottom Tooltip
</ a >
< a href =
class = "ms-5" id = "l-tooltip"
data-bs-placement = "left"
title = "This is the Left placed tooltip" >
Hover to open Left Tooltip
</ a >
</ div >
< div class = "container mt-4 p-2" >
< button type = "button" class = "btn btn-danger" id = "instanceBtn_1" >
Get Instance of Bottom Tooltip
</ button >
< button type = "button" class = "btn btn-danger ms-4" id = "instanceBtn_2" >
Get Instance of Left Tooltip
</ button >
</ div >
< script >
$(document).ready(function () {
// Trigger the first tooltip
$("#b-tooltip").tooltip();
// Trigger the second tooltip
$("#l-tooltip").tooltip();
// Get first tooltip instance on button click
$("#instanceBtn_1").click(function () {
var tooltip_1 = bootstrap.
Tooltip.getInstance($("#b-tooltip")[0]);
console.log(tooltip_1);
});
// Get second tooltip instance on button click
$("#instanceBtn_2").click(function () {
var tooltip_2 = bootstrap.
Tooltip.getInstance($("#l-tooltip")[0]);
console.log(tooltip_2);
});
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#getinstance