输入无效时显示工具提示

Question

有一个数字输入法，用户可以在其中输入数字。如果数字大于 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) 但没有成功。

有什么想法吗？

Answer 1

您可以使用 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>

Fiddle Code

Answer 2

不使用像这样的组合器（更好的说法是：Descendant Combinator）.element1 .element2 将使 CSS 寻找适合 .element2-[=67= 的任何元素] 或者是 .element1 的后代。这意味着，.element2 可以是 .element1.
的直接或间接子代对于您的情况，您应该使用同级组合器，~ (General Sibling Combinator) or + (Adjacent Sibling Combinator) 到 select .tooltiptext 因为 input 可以使用 selected :invalid-select或.

.tooltip input:invalid ~ .tooltiptext {
  /* Your CSS-rule to make `.tooltiptext` visible */
}

另一个解决方案

为了这个问题我创建了一个CSS工具-class.tooltipped。只需像下面这样格式化您的 <input> 以合并工具提示（括号中的 classes 是需要选择其中之一的选项）：

<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 放置的，您应该自己确保要显示的工具提示有足够的 space 以供在显示时阅读。

更改显示工具提示的一侧就像更改 .tooltipped 的方向 class 一样简单。这甚至可以通过 JavaScript.
轻松完成例如，当 phone 可能太小而无法在其初始方向显示工具提示时，您可以更改 directional-class。

显然，您可以使输入元素为任何类型。如果你想自己使它无效（例如，当 :invalid 不会触发时），你可以用 JS 给它 class .invalid 以获得与此工具提示功能相同的效果。

这是一个示例，基本上显示了所有可用的功能：

/* 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>

输入无效时显示工具提示

Show a tooltip when the input is invalid

html

javascript

css

input

tooltip

另一个解决方案