Bootstrap 5 Tooltips Usage Options Last Updated : 25 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 animation on components as a fade transition to the tooltip. It takes the boolean value as true or false. The default value is true.container: It is used to position the flow of the tooltip in the document. It takes a string as a value. By default, the value is falsedelay: It is used to delay showing and hiding the tooltip. It takes a number as a value. By default, it is 0.html: It allows HTML in the tooltip. It takes the boolean value as true or false. The default value is true.placement: It defines the position of the tooltip auto/top/bottom/right/left. It takes a string as value as top, bottom, left, or right. By default value is top.selector: The selector option essentially allows you to delegate the tooltip to another element. It takes strings as values. By default is false.template: The basic HTML template used to create a tooltip. It takes a string as a value which is an HTML code.title: The title option is used to pass the title in the tooltip element. It takes a string as a value. By default it is empty.trigger: It is used to describe how the tooltip is triggered on click/ hover/focus/manual. It takes the string as values click, hover, focus, manual. By default, it is a hover focus.Offset: It sets the offset of the tooltip relative to its target. It takes an array as a value. By default, it is [0, 0].fallbackPlacements: fallbackPlacements is used to place the tooltip on over document. It takes an array as values. It takes a string as a value.['top', 'right', 'bottom', 'left'].customClass: We can pass the classes to the tooltip which is specified in the template. It takes a string as a value. By default it is empty. We can pass class names as strings. sanitize: By default it is “true”, we can sanitize the activated template, content, and title. It takes a boolean as a value. By default it is true.allowList: Contains allowed attributes and tags. It takes an object as the value.sanitizeFn: We supply your own sanitization function, use sanitizeFn. It takes functions as a value. By default it is null.boundary: Specifies the boundary element for the tooltip. It takes to string values. By default, it is 'clippingParents'.popperConfig: It is used to modify the default Popper configuration for Bootstrap. It can take null/object/function. The default value is null.Options can be passed via javascript as well.Using the function with popperConfig: By using popperConfig we can customize the bootstrap 5 popover component. It takes a string or null or object. By default it is null.Example 1: In this example, we will demonstrate the tooltip option trigger through which we can specify the user action that will trigger the tooltip. HTML <!DOCTYPE> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body > <div class="container"> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Bootstrap 5 Tooltip Usage Options</strong> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="cilck" title="Tooltip on top"> Click on to show tooltip </button> </center> </div> <script type="text/javascript"> let tooltipTriggerList = [].slice.call(document .querySelectorAll('[data-bs-toggle="tooltip"]')) let tooltipList = tooltipTriggerList .map(function (tooltipTriggerEl) { return new bootstrap .Tooltip(tooltipTriggerEl) }) </script> </body> </html> Output:Example 2: In this example, we will demonstrate the tooltip option data-bs-placement through which we can place the tooltip in different places. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container"> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>Bootstrap 5 Tooltip Usage Options</strong> <br> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button> </center> </div> <script type="text/javascript"> let tooltipTriggerList = [].slice.call(document .querySelectorAll('[data-bs-toggle="tooltip"]')) let tooltipList = tooltipTriggerList .map(function (tooltipTriggerEl) { return new bootstrap .Tooltip(tooltipTriggerEl) }) </script> </body> </html> Output :Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#options Comment More infoAdvertise with us Next Article Bootstrap 5 Tooltips using function with popperConfig J jayadeepreddypeddireddy Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More 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