<!-- 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 -->