Bootstrap 5 Tooltips
Last Updated :
17 Nov, 2022
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 element with a title attribute to specify the text that will be displayed inside the tooltip.
Syntax:
<tag class="" data-bs-toggle="tooltip"
title="Message You Want To Display">
Content
</tag>
The tooltip plugin generates content and markup on demand and by default places tooltips after their trigger element.
- SASS: It is the short form of a Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. There are variables that can be used to manipulate the style of tooltips.
- Usage: In usage, the tooltip plugin inserts tooltips after its trigger element. Also, it generates text and markup as needed.
- Markup: The required markup is a type of data attribute.
It includes a title on the HTML element. By default. It is set to the top by the plugin.
- Disabled Elements: Disabled element is a tooltip element. This element doesn’t display data when the user focuses on, hovers over, or clicks the attribute.
- Options: As the name says, options can be passed to elements with the help of data attributes or JavaScript.
- Methods: There are lots of methods that can be used with tooltips to perform like the show, hide, toggle, etc.
- Events: Below mentioned events can be used in tooltips.
Below example illustrates the Bootstrap 5 Tooltips:
Example 1: In this example, we will use a tooltip without bootstrap, you have to notice the position and style of the tooltip.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>Tooltips</strong>
<br><br>
<div>
<a href="#"
type="button"
title="This is tooltip effect on Link!">
Tooltip On Link !
</a>
<button href="#"
type="button"
title="This is tooltip effect on Button!">
Tooltip On Button !
</button>
</div>
</center>
</body>
</html>
|
Output:
Bootstrap 5 Tooltips
Example 2: In this example, we will demonstrate the Bootstrap 5 Tooltip.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Tooltips</strong>
<div class="container mt-2">
<a href="#" type="button"
data-bs-toggle="tooltip"
title="This is tooltip effect on Link!">
Tooltip On Link !
</a>
<button href="#" class="btn btn-success"
type="button" data-bs-toggle="tooltip"
title="This is tooltip effect on Button!">
Tooltip On Button !
</button>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function(tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
})
</script>
</center>
</body>
</html>
|
Output:
Bootstrap 5 Tooltips
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...