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 :
.gif)
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...