Bootstrap 5-Tooltips


The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:

To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element.

Use the title attribute to specify the text that should be displayed inside the tooltip:

Basic Tooltip example

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Bootstrap 5 Tooltip with Anchor Tag </h2>
<a href = "#" type = "button" data-bs-toggle = "tooltip" title = "Thank You!" > Hover Here! </a>
</div>
<script>
var tooltipList1 = [].slice.call(document.querySelectorAll('[data-bs-toggle = "tooltip"]'))
var tooltipList2 = tooltipList1.map(function (tooltipTriggerfun) {
return new bootstrap.Tooltip(tooltipTriggerfun)
<script>
</body>
</html>

Output

Bootstrap 5 Example

Bootstrap 5 Tooltip with Anchor Tag

Hover Here!

Basic Tooltip with button function

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Bootstrap 5 Tooltip with Button </h2>
<button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" title = "Thank You!"" > Hover Here! </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>
</body>
</html>

Output

Bootstrap 5 Example

Bootstrap 5 Tooltip with Button


Tooltip with Position

<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Bootstrap 5 Tooltip with Button </h2>
<button href = "#" class = "btn btn-info" type = "button" data-bs-toggle = "tooltip" data-bs-placement = "right" title = "Thank You!"" > Hover Here! </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>
</body>
</html>

Output

Bootstrap 5 Example

Bootstrap 5 Tooltip with Button