Open In App

Bootstrap 5 Validation Tooltips

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 30 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Similar Reads