动态更改工具提示自定义-class
Dynamically change tooltip custom-class
我想根据用户在特定输入字段上提供的数据动态更改 data-custom-class（即，如果用户没有为 "username" 提供至少 1 个字符，工具提示必须是带有一些文本的红色，如果用户提供了有效的 "username"，工具提示必须是带有其他文本的绿色）。
问题是文本实际上在改变，但 class 没有（它保留 JQuery 设置的第一个 class。
我已经尝试过 attr() 和 tooltip(options) -（即 "data-customClass" 通过 attr() 或 customClass 通过 tooltip()）。如您所见，我什至试图强制处理工具提示并在再次设置之前删除属性，但 none 似乎可以完成工作。
工具提示创建了一个新的 "div"，即使它更改了属性 "text"，“自定义-class 属性也没有。
注意：我正在使用 Bootstrap 4 + Popper.js + Bootstrap 自定义 Class (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>
要更改 data attribute 您需要更改：
$('#username').removeAttr("data-custom-class");
$('#username').attr("data-custom-class", "tooltip-success");
与：
$('#username').data("customClass", "tooltip-success");
并在第一个 if 部分再次设置为 danger。
片段：
$('#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>
我想根据用户在特定输入字段上提供的数据动态更改 data-custom-class（即，如果用户没有为 "username" 提供至少 1 个字符，工具提示必须是带有一些文本的红色，如果用户提供了有效的 "username"，工具提示必须是带有其他文本的绿色）。
问题是文本实际上在改变，但 class 没有（它保留 JQuery 设置的第一个 class。
我已经尝试过 attr() 和 tooltip(options) -（即 "data-customClass" 通过 attr() 或 customClass 通过 tooltip()）。如您所见，我什至试图强制处理工具提示并在再次设置之前删除属性，但 none 似乎可以完成工作。
工具提示创建了一个新的 "div"，即使它更改了属性 "text"，“自定义-class 属性也没有。
注意：我正在使用 Bootstrap 4 + Popper.js + Bootstrap 自定义 Class (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>
要更改 data attribute 您需要更改：
$('#username').removeAttr("data-custom-class");
$('#username').attr("data-custom-class", "tooltip-success");
与：
$('#username').data("customClass", "tooltip-success");
并在第一个 if 部分再次设置为 danger。
片段：
$('#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>