Показать всплывающую подсказку, когда ввод недействителен
Есть вход с номером типа, где пользователь может написать число. Если число больше 4, оно изменит цвет границы ввода на красный.
Я хочу показать всплывающую подсказку в той же ситуации, а не при наведении. Это способ сделать это?
<div className = "tooltip">
<input
className = "partial-quantity-input"
type = "number"
min = "0"
max = "4"
value = {quantity}
onChange = {changeValue}
/>
<span className = "tooltiptext">Exceeds original ordered quantity.</span>
</div>
CSS:
.partial-quantity-input {
background: rgb(255, 255, 255);
border-radius: 0px;
border: 1px solid rgb(255, 255, 255);
height: 40px;
width: 40px;
outline: none;
&:focus {
border: 1px solid rgb(201, 200, 200);
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:invalid {
outline: none;
border: 1px solid red;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
bottom: 100%;
left: 50%;
margin-left: -60px;
width: 120px;
color: rgb(0, 0, 0);
text-align: center;
padding: 5px 0;
background: rgb(255, 255, 255);
border-radius: 3px;
border: 1px solid rgb(220, 220, 220);
height: 38px;
width: 252px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
как и в коде, он показывает всплывающую подсказку при наведении (.tooltip:hover).
Я пробовал .tooltip:invalid или .tooltip(input:invalid), но не получилось.
Есть идеи?
Используйте общий комбинатор братьев и сестер .partial-quantity-input ~ .tooltiptext {display: none;} .partial-quantity-input:invalid ~ .tooltiptext {display:inline;}.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете получить часть всплывающей подсказки, используя JavaScript:
Например:
let input = document.getElementById("quantity-input");
let tooltip = document.getElementById("invalid_entry");
input.addEventListener("keyup", function(e){
if (e.currentTarget.value.length > 4){
tooltip.innerHTML = "Exceeded length of 4";
tooltip.style.display = "block";
input.style.border = "3px solid red";
}
else if (e.currentTarget.value.length <= 4) {
tooltip.innerHTML = "";
tooltip.style.display = "none";
input.style.borderColor = "1px solid black";
}
}).partial-quantity-input {
background: rgb(255, 255, 255);
border-radius: 0px;
border: 1px solid rgb(255, 255, 255);
height: 40px;
width: 40px;
outline: none;
&:focus {
border: 1px solid rgb(201, 200, 200);
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:invalid {
outline: none;
border: 1px solid red;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
bottom: 100%;
left: 50%;
margin-left: -60px;
width: 120px;
color: rgb(0, 0, 0);
text-align: center;
padding: 5px 0;
background: rgb(255, 255, 255);
border-radius: 3px;
border: 1px solid rgb(220, 220, 220);
height: 38px;
width: 252px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#invalid_entry {
display: none;
background: orange;
padding: 6px;
color: #fff;
position: absolute;
left: 20px;
top: 28px;
}<div className = "tooltip">
<span id = "invalid_entry"></span>
<input
className = "partial-quantity-input"
id = "quantity-input"
type = "number"
min = "0"
max = "4"
/>
<!-- <span className = "tooltiptext">Exceeds original ordered quantity.</span> -->
</div>вы уверены, что он работает? не вижу подсказки
Это не совсем всплывающая подсказка, а стилизованный div для представления всплывающей подсказки как действия.
Не знаю, но я ничего там не вижу. Я пишу значение больше 4, граница становится красной и все. Нет всплывающей подсказки или div
invalid_entry есть position absolute. Вы должны установить left и top в соответствии с полем ввода @JeanPierre
Использование без комбинатора (лучше сказать: комбинатора потомков ), подобного этому .element1 .element2, заставит CSS искать любой элемент, который соответствует .element2-селектору, являющемуся потомком .element1. Это означает, что .element2 может быть прямым или косвенным потомком .element1.
В вашем случае вы должны использовать родственный комбинатор, ~ (Общий одноуровневый комбинатор ) или + ( Смежный одноуровневый комбинатор), чтобы выбрать .tooltiptext, когда input можно выбрать с помощью :invalid-селектора.
.tooltip input:invalid ~ .tooltiptext {
/* Your CSS-rule to make `.tooltiptext` visible */
}
Другое решение
Специально для этого вопроса я создал класс инструментов CSS .tooltipped. Просто отформатируйте <input>, как показано ниже, чтобы включить всплывающую подсказку (классы в скобках — это варианты, один из которых необходимо выбрать):
<div class = "tooltipped (top | bottom | left | right)">
<input />
<div class = "(on-invalid | always)">
<div>
<div>
(Place your content here)
</div>
</div>
</div>
</div>
Контент, который вы размещаете в (Place your content here), может быть как простым сообщением, так и большим количеством HTML-кода. При простой вставке сообщения вы можете установить white-space: pre, чтобы сохранить его форматирование, так как в противном случае всплывающая подсказка будет как можно более узкой.
Поскольку всплывающая подсказка размещается с помощью position: absolute, вы должны сами убедиться, что отображаемая всплывающая подсказка имеет достаточно места для чтения при отображении.
Изменить сторону, на которой должна отображаться всплывающая подсказка, так же просто, как изменить класс направления .tooltipped. Это можно легко сделать даже с помощью JavaScript.
Например, вы можете изменить класс направления, если телефон слишком мал для отображения всплывающей подсказки в исходном направлении.
Очевидно, вы можете сделать входной элемент любого типа. Если вы хотите аннулировать его самостоятельно (например, когда :invalid не срабатывает), вы можете присвоить ему класс .invalid с помощью JS для того же эффекта в отношении функций этой всплывающей подсказки.
Вот пример, показывающий в основном все доступные функции:
/* For this example */
html, body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-areas:
". ."
". .";
align-items: center;
justify-items: center;
}
input:invalid {
border-color: red;
outline-color: red;
background: pink;
}
/* Tool-class: Tooltip */
.tooltipped * {margin: 0}
.tooltipped {
--tt-bg: #3f3f3f;
display: flex;
align-items: center;
}
.tooltipped > div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.tooltipped > div > div {
position: absolute;
display: flex;
align-items: center;
}
.tooltipped > div > div::before {
content: "";
border: 4px solid transparent;
}
.tooltipped > div > div > div {
padding: 0.1rem 0.4rem;
border-radius: 2px;
color: white;
background: var(--tt-bg);
}
/* Directional-classes */
.tooltipped.right > div > div {transform: translateX(50%)}
.tooltipped.right > div > div::before {border-right-color: var(--tt-bg)}
.tooltipped.left {flex-flow: row-reverse}
.tooltipped.left > div {justify-content: flex-end}
.tooltipped.left > div > div {flex-flow: row-reverse}
.tooltipped.left > div > div::before {border-left-color: var(--tt-bg)}
.tooltipped.top {flex-flow: column-reverse}
.tooltipped.top > div > div {
flex-flow: column-reverse;
transform: translateY(-50%);
}
.tooltipped.top > div > div::before {border-top-color: var(--tt-bg)}
.tooltipped.bottom {flex-flow: column}
.tooltipped.bottom > div > div {
flex-flow: column;
transform: translateY(50%);
}
.tooltipped.bottom > div > div::before {border-bottom-color: var(--tt-bg)}
/* "Listener"-classes */
.tooltipped input:invalid + .on-invalid,
.tooltipped input.invalid + .on-invalid {visibility: visible}
.tooltipped > .always {visibility: visible}<div class = "tooltipped top">
<input type = "number" min = "0" max = "4"/>
<div class = "on-invalid">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class = "tooltipped right">
<input type = "number" min = "0" max = "4"/>
<div class = "always">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class = "tooltipped bottom">
<input type = "number" min = "0" max = "4"/>
<div class = "on-invalid">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class = "tooltipped left">
<input type = "number" min = "0" max = "4"/>
<div class = "always">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
Проверьте этот ответ stackoverflow.com/questions/37798967/…