Bootstrap 5 Validation Tooltips are used to provide interactive textual hints to the user about the requirements to submit the form.
Bootstrap 5 Validation Tooltips classes:
- valid|invalid-feedback: This class is used to tell the user about what things are necessary for the form to be submitted.
- valid|invalid-tooltip: This class is similar to the .{valid|invalid}-feedback.
Syntax:
<div class="position-relative"> <div class="...-tooltip"> ... </div> </div>
Example 1: Let’s see a basic example of tooltip validation in Bootstrap5.
HTML
<!DOCTYPE html> < html >
< head >
<!-- Load Bootstrap -->
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
</ head >
< body class = "mx-5 my-5" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap5 Validation Tooltips</ h3 >
< form class = "row g-2 needs-validation" novalidate>
< section class = "col-2 position-relative" >
< label class = "form-label" >
Your name
</ label >
< input type = "text" class = "form-control"
value = "aman" >
< section class = "valid-tooltip" >
Looks good!
</ section >
</ section >
< section class = "col-3 position-relative" >
< label class = "form-label" >
City
</ label >
< input type = "text" class = "form-control" required>
< section class = "invalid-tooltip" >
Please Enter your city
</ section >
</ section >
< section >
< button class = "btn btn-primary" type = "submit" >
Submit form
</ button >
</ section >
</ form >
< script >
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</ script >
</ body >
</ html >
|
Output:
Example 2: Let’s see another example of tooltip validation in Bootstrap5.
HTML
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
</ head >
< body class = "mx-5 my-5" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h3 >Bootstrap5 Validation Tooltips</ h3 >
< form class = "row g-lg-3 needs-validation" novalidate>
< section class = "col-3 position-relative" >
< label class = "form-label" >
First name
</ label >
< input type = "text" class = "form-control" required>
< section class = "invalid-tooltip" >
Enter first name
</ section >
</ section >
< section class = "col-3 position-relative" >
< label class = "form-label" >
Last name
</ label >
< input type = "text" class = "form-control" required>
< section class = "invalid-tooltip" >
Enter last name
</ section >
</ section >
< section class = "col-3 position-relative" >
< label class = "form-label" >
City
</ label >
< input type = "text" class = "form-control" required>
< section class = "invalid-tooltip" >
Enter your city
</ section >
</ section >
< section >
< button class = "btn btn-primary" type = "submit" >
Submit form
</ button >
</ section >
</ form >
< script >
// Example starter JavaScript for disabling
// form submissions if there are invalid fields
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/validation/#tooltips