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.
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
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