Bootstrap 5 Tooltips Usage Markup
Last Updated :
30 Jan, 2023
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 are the data attribute and the title which we want to display on the popover element.
Syntax:
To pass the tooltip we use data-attribute as follows:
data-bs-toggle="tooltip."
To pass the title we use title attribute:
<tag class="" data-bs-toggle="tooltip"
title="title you want display">
...
</tag>
Example 1: In this example, we will demonstrate the bootstrap 5 tooltip on a button component.
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 >
< script src =
</ script >
</ head >
< body class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap 5 Tooltips Usage Markup</ h3 >
< button id = "my-button" type = "button" class = "btn btn-primary"
data-toggle = "tooltip" title = "tooltip on bottom"
data-bs-placement = "bottom" >
Hover over me
</ button >
< script >
$(document).ready(function() {
$('#my-button').tooltip();
});
</ script >
</ body >
</ html >
|
Output:
Bootstrap 5 Tooltips Usage Markup
Example 2: In this example, we will demonstrate bootstrap 5 tooltip on a link.
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 >
< script src =
</ script >
</ head >
< body class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap 5 Tooltips Usage Markup</ h3 >
< a href = "#" id = "tooltip_id"
data-toggle = "tooltip"
title = "Tooltip on a link" >
Link with tooltip
</ a >
< script >
$(document).ready(function() {
$('#tooltip_id').tooltip();
});
</ script >
</ body >
</ html >
|
Output:
Bootstrap 5 Tooltips Usage Markup
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#markup
Share your thoughts in the comments
Please Login to comment...