javascript - 输入无效时显示工具提示

Question

有一个类型为 number 的输入，用户可以在其中输入数字。如果数字大于 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

不使用像这样的组合器(最好说: Descendant Combinator ) .element1 .element2将使 CSS 查找适合 .element2 的任何元素-selector 是 .element1 的后代.这意味着，.element2可以是 .element1 的直接或间接子代.
对于您的情况，您应该使用兄弟组合器，~ ( General Sibling Combinator ) 或 + ( Adjacent Sibling Combinator ) 选择 .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>