How to show vee-validate errors in custom tooltips?

[PetroGromovo]

In vuejs 2 app using vee-validate ^3.4.14 I have several inputs on modal form of fixed height.
On validation errors I got validation error messages below of inputs, as I have layout like :

    <div class="form-group">
        <ValidationProvider
            name="password_confirmation"
            rules="required"
            v-slot="{ errors }"
        >
            <div class="input-group">
                <input type="password"
                       v-model="password_confirmation"
                       id="password_confirmation"
                       name="password_confirmation"
                       class="form-control editable_field"
                       placeholder="Password confirmation"
                       autocomplete=off
                       ref="password"
                >
            </div>
            <p class="error">{{ errors[0] }}</p>
        </ValidationProvider>
    </div>        <div class="form-group">
        <ValidationProvider
            name="password_confirmation"
            rules="required"
            v-slot="{ errors }"
        >
            <div class="input-group">
                <input type="password"
                       v-model="password_confirmation"
                       id="password_confirmation"
                       name="password_confirmation"
                       class="form-control editable_field"
                       placeholder="Password confirmation"
                       autocomplete=off
                       ref="password"
                >
            </div>
            <p class="error">{{ errors[0] }}</p>
        </ValidationProvider>
    </div>

But these messages break layout of modal form, as height of modal form is increased and elements
on bottom of the form are hidden. If there is a way to show these errors in some other way ?
Say a) select input with “error_border” class and b) show some tooltip message near with any input with error text?

Thanks in advance!