Bootstrap 5 Tooltips Usage Options
Last Updated :
11 Jan, 2023
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.
HTML
<!DOCTYPE>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link href =
rel = "stylesheet" >
< script src =
</ 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" >
var tooltipTriggerList =
[].slice.call(document
.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList
.map(function (tooltipTriggerEl) {
return new bootstrap
.Tooltip(tooltipTriggerEl)
})
</ script >
</ body >
</ html >
|
Output:
Bootstrap 5 Tooltips Usage Options
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 =
rel = "stylesheet" >
< script src =
</ 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" >
var tooltipTriggerList =
[].slice.call(document
.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList
.map(function (tooltipTriggerEl) {
return new bootstrap
.Tooltip(tooltipTriggerEl)
})
</ script >
</ body >
</ html >
|
Output :
Bootstrap 5 Tooltips Usage Options
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#options
Share your thoughts in the comments
Please Login to comment...