invalid-tooltip
bootstrap5.css
bootstrap5.css
.invalid-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.875rem;
line-height: 1.5;
color: #fff;
background-color: rgba(220, 53, 69, 0.9);
border-radius: 0.25rem;
}
bootstrap5.css
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
display: block;
}
bootstrap5.css
.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip,
.custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip {
display: block;
}
bootstrap5.css
.was-validated .form-control-file:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-tooltip,
.form-control-file.is-invalid ~ .invalid-feedback,
.form-control-file.is-invalid ~ .invalid-tooltip {
display: block;
}
bootstrap5.css
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip,
.form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
display: block;
}
bootstrap5.css
.was-validated .custom-control-input:invalid ~ .invalid-feedback,
.was-validated .custom-control-input:invalid ~ .invalid-tooltip,
.custom-control-input.is-invalid ~ .invalid-feedback,
.custom-control-input.is-invalid ~ .invalid-tooltip {
display: block;
}
bootstrap5.css
.was-validated .custom-file-input:invalid ~ .invalid-feedback,
.was-validated .custom-file-input:invalid ~ .invalid-tooltip,
.custom-file-input.is-invalid ~ .invalid-feedback,
.custom-file-input.is-invalid ~ .invalid-tooltip {
display: block;
}
html bootstrap5 Sample
ツールチップJS:valid-tooltip
<!-- マウスオンで説明文を表示する -->
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation01">姓</label>
<input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
<div class="valid-tooltip"> 入力済! </div>
</div>
<div class="col-md-6 mb-3">
<label for="validation02">名</label>
<input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
<div class="valid-tooltip"> 入力済! </div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validation03">市町村</label>
<input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
<div class="invalid-tooltip"> 市町村名を入力してください </div>
</div>
<div class="col-md-3 mb-3">
<label for="validation04">都道府県</label>
<input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
<div class="invalid-tooltip"> 都道府県名を入力してください </div>
</div>
<div class="col-md-3 mb-3">
<label for="validation05">郵便番号</label>
<input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
<div class="invalid-tooltip"> 郵便番号を入力してください </div>
</div>
</div>
<button class="btn btn-primary" type="submit">送信する</button>
</form>
<!-- 無効な入力がある場合にフォームの送信を無効にする -->
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
// Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
var forms = document.getElementsByClassName('needs-validation');
// ループして帰順を防ぐ
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>