How do I display validation messages as tooltips instead of below inputs?
Asked on Jul 14, 2025
1 Answer
To display validation messages as tooltips in Bootstrap 5, you can use the `data-bs-toggle="tooltip"` attribute along with custom JavaScript to trigger the tooltips on invalid inputs.
<!-- BEGIN COPY / PASTE -->
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationTooltip01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationTooltip01" placeholder="First name" required>
<div class="invalid-tooltip">
Please provide a valid first name.
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Initialize tooltips
document.querySelectorAll('.needs-validation').forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
// Enable tooltips
var tooltipTriggerList = [].slice.call(form.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Use the `novalidate` attribute on the form to prevent the default browser validation.
- Add the `invalid-tooltip` class to display the tooltip on invalid inputs.
- Initialize tooltips using Bootstrap's JavaScript API.
- Ensure the form has the `was-validated` class to trigger validation styles.