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 false
delay: 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.
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.
