动态更改工具提示自定义类

时间：2019-02-26 21:11:06

标签： jquery bootstrap-4 tooltip

我想根据用户在特定输入字段上提供的数据来动态更改data-custom-class（即，如果用户不为“ username”提供至少1个字符，则工具提示必须为红色并带有一些文本，如果用户提供）有效的“用户名”，工具提示必须为绿色，并带有其他一些文字。

问题在于文本实际上正在改变，但类却没有改变（它保留了JQuery设置的第一个类。

我已经尝试过attr（）和tooltip（options）-（即通过attr（）的“ data-customClass”或通过tooltip（）的customClass）。如您所见，我什至试图强制处理工具提示，并在再次设置属性之前先删除属性，但这似乎都不起作用。

Tooltip会创建一个新的“ div”，即使它更改了“ text”属性，“ custom-class”属性也不会。

注意：我正在使用Bootstrap 4 + Popper.js + Bootstrap自定义类（Js + CSS）扩展。 extension files link here

如果您对此有任何建议，我将不胜感激！

先谢谢。

原始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 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>

1 个答案:

答案 0 :(得分：2)

要更改data attribute，您需要更改：

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

具有：

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

然后在第一个if部分中再次设置为危险。

摘要：

$('#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>

相关问题
最新问题