Bootstrap 5 Tooltips getOrCreateInstance() Method Last Updated : 23 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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. HTML <!doctype html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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. HTML <!doctype html> <html lang="en"> <head> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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 Comment More infoAdvertise with us P priyanshuchatterjee01 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-5 Similar Reads Bootstrap 5 Tooltips A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. To create a tooltip, we need to add the data-bs-toggle="tooltip" attribute to an el 3 min read Bootstrap 5 Enable Tooltips Everywhere Bootstrap 5 Tooltips can be enabled everywhere by first creating a list of all the tooltips and then enabling each of them. All the tooltips have an attribute named "data-bs-toggle" set to "tooltip". This attribute can be used to select all the tooltips using the document.querySelectorAll() method.B 2 min read Bootstrap 5 Tooltips Usage Bootstrap 5 Tooltips usage is used to create the markup and the text on the elements when required, and the tooltip created is placed after the element that was triggered. Using Javascript to launch Tooltips: var example = document.getElementById('...') var ... = new bootstrap.Tooltip(example, value 3 min read Bootstrap 5 Tooltips Usage Markup Bootstrap 5 Tooltip is one of the components which provide small, interactive, textual hints for elements. They are used to provide additional information about a specific element when the user hovers over it or focuses on it.Bootstrap 5 Tooltips Usage Markup: The markup required for the tooltips ar 2 min read Bootstrap 5 Tooltips Usage Disabled Elements Bootstrap 5 Tooltips are a JavaScript plugin that allows you to add small, interactive, text-based hints to elements on your web page. They are displayed when the user hovers over, clicks on, or focuses on the element. Tooltips can be used to provide additional information about an element, such as 2 min read Bootstrap 5 Tooltips Usage Options Bootstrap 5 Tooltip usage options can be passed through the data attributes or via JavaScript. To pass the options through data attributes we have to append the option name with the data-bs for example data-bs-animation="true".Some of the many options available are:animation: It is used to apply ani 4 min read Bootstrap 5 Tooltips using function with popperConfig Bootstrap 5 Tooltips Using function with popperConfig facilitates an interface that allows us to change the default Popper Configuration. Popper is a framework that helps us to create popups in websites. PopperConfig is actually an option in bootstrap.Tooltip class that can be initialized with an el 3 min read Bootstrap 5 Tooltips Usage Methods Bootstrap 5 Tooltips facilitates some pre-defined methods that we can use to trigger different types of functionalities in tooltips. The methods can be implemented using JavaScript and JQuery.Bootstrap 5 Tooltips Usage Methods: The Tooltips Methods with their function are given below:show(): The sho 4 min read Bootstrap 5 Tooltips show() Method Bootstrap 5 Tooltip is a UI element that shows some extra information when the user hovers over or focuses on a tooltip-enabled element. The Tooltip show() method is used to show an element's tooltip. The Tooltip having the zero title length will not be visible.Syntax:const tooltip = new bootstrap.T 2 min read Bootstrap 5 Tooltip hide() Method Bootstrap 5 Tooltip is used to show some extra information to the user when the user hovers over the element. The Tooltip hide() method is used to hide a visible tooltip.Syntax:bootstrap.Tooltip.getInstance("#tooltip-ID").hide();Parameters: This method accepts a single parameter that holds the toolt 2 min read Like