Dynamically change tooltip custom-class

Question

I want to dynamically change data-custom-class depending on user's provided data on an specific input field (i.e. if user do not provide at least 1 char for "username", tooltip must be red with some text, if user provide a valid "username", tooltip must be green with some other text).

The problem is that text is in fact changing, but class is not (it keeps the first class set by JQuery.

I've already tried attr() and tooltip(options) - (i.e. "data-customClass" via attr() or customClass via tooltip()). As you can see, I'm even trying to force tooltip disposal and also remove attribute before set it again, but none of that seems to do the work.

Tooltip creates a new "div" and even though it changes the attribute "text", the "custom-class attribute it does not.

NOTE: I'm using the Bootstrap 4 + Popper.js + The Bootstrap Custom Class (Js + CSS) extension. extension files link here

I'll appreciate if you guys have any tips on that!

Tks in advance.

ORIGINAL HTML:

<form action="/register" method="post">
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="username"> Username: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="username" id="username" type="text" class="form-control-sm" data-custom-class="tooltip-danger" data-togle="tooltip">
                <small id="usrndHelpBlock" class="d-block form-text text-muted">
                        Username must be at least 1 character long and must not be already registered.
                    </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
            <div class="col-xs-3 col-sm-2 text-left">
                <label for="pwd">Password: </label>
            </div>
            <div class="col-xs-5 text-left">
                <input name="password" id="pwd" type="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="form-control-sm" data-toggle="tooltip" data-placement="aright" data-custom-class="tooltip-primary" title="">
                    <small id="passwordHelpBlock" class="d-block form-text text-muted">
                        Password must be at least 8 characters long , contain letters and numbers, and must not contain spaces, special characters, or emoji.
                    </small>
            </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="conf">Confirmation: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="confirmation" id="conf" type="text" class="form-control-sm" data-toggle="tooltip" data-placement="auto" data-custom-class="tooltip-primary" title="Confirmation doesn't match password!">
                <small id="confHelpBlock" class="form-text text-muted">
                    Confirmation must match password.
                </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-8">
            <button id="b_register" class="btn btn-primary">Register Now !</button>
        </div>
    </div>
</form>

SCRIPT

<script type="text/javascript">
    $('#username').focusout(function() {
        if ($('#username').val() == "") {
            $('#username').tooltip('dispose');
            $('#username').attr("title","User must be at least 1 character long!");
            $('#username').tooltip('toggle');
            $('#username').focus();
        } else {
            $('#username').tooltip('dispose');
            $('#username').removeAttr("data-custom-class");
            $('#username').attr("data-custom-class", "tooltip-success");
            $('#username').attr("title","Username avaiable!");
            $('#username').tooltip('dispose');
            $('#username').tooltip('toggle');
        }
    });
</script>

Answer 1

In order to change a data attribute you need to change:

$('#username').removeAttr("data-custom-class");
$('#username').attr("data-custom-class", "tooltip-success");

with:

$('#username').data("customClass", "tooltip-success");

And set again to danger in the first if part.

The snippet:

$('#username').tooltip();
$('#username').on('focusout', function() {
    if ($('#username').val() == "") {
        $('#username').tooltip('dispose');
        $('#username').attr("title","User must be at least 1 character long!");
        $('#username').data("customClass", "tooltip-danger");
        $('#username').tooltip('toggle');
        $('#username').focus();
    } else {
        $('#username').tooltip('dispose');
        $('#username').data("customClass", "tooltip-success");
        $('#username').attr("title","Username avaiable!");
        $('#username').tooltip('dispose');
        $('#username').tooltip('toggle');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.css">
<script src="https://www.jqueryscript.net/demo/Custom-Classes-Bootstrap-Tooltips/bootstrap-tooltip-custom-class.js"></script>


<form action="/register" method="post">
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="username"> Username: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="username" id="username" type="text" class="form-control-sm" data-custom-class="tooltip-danger" data-togle="tooltip">
            <small id="usrndHelpBlock" class="d-block form-text text-muted">
                Username must be at least 1 character long and must not be already registered.
            </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="pwd">Password: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="password" id="pwd" type="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" class="form-control-sm" data-toggle="tooltip" data-placement="aright" data-custom-class="tooltip-primary" title="">
            <small id="passwordHelpBlock" class="d-block form-text text-muted">
                Password must be at least 8 characters long , contain letters and numbers, and must not contain spaces, special characters, or emoji.
            </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-3 col-sm-2 text-left">
            <label for="conf">Confirmation: </label>
        </div>
        <div class="col-xs-5 text-left">
            <input name="confirmation" id="conf" type="text" class="form-control-sm" data-toggle="tooltip" data-placement="auto" data-custom-class="tooltip-primary" title="Confirmation doesn't match password!">
            <small id="confHelpBlock" class="form-text text-muted">
                Confirmation must match password.
            </small>
        </div>
    </div>
    <div class="form-group row flex-v-center">
        <div class="col-xs-8">
            <button id="b_register" class="btn btn-primary">Register Now !</button>
        </div>
    </div>
</form>