輸入無效時顯示工具提示

Question

有一個類型為 number 的輸入，用戶可以在其中寫一個數字。 如果數字大於 4，它會將輸入邊框的顏色更改為紅色。

我想在相同的情況下顯示工具提示，而不是在 hover 上。 這是一種方法嗎？

<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;
}

就像在代碼中一樣，它顯示了 hover ( .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>

小提琴代碼

Answer 2

不使用像這樣.element1.element2的組合器（更好地說： Descendant Combinator ）將使 CSS 尋找任何適合.element2 -選擇器的元素，它是.element1的后代。 這意味着， .element2可以是.element1的直接或間接子代。
對於您的情況，您應該在 select .tooltiptext 中使用同級組合器~ ( General Sibling Combinator ) 或+ ( Adjacent Sibling Combinator ) 用於何時可以使用:invalid .tooltiptext選擇input 。

.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 的方向.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>