如何更改工具提示的位置？

Question

我想更改工具提示的位置，以覆盖问号左侧的文本字段。

在我的代码中，我有四个问号。 问号左侧有四个文本字段。 用户将鼠标悬停在问号上时，应在文本字段上方放置一个工具提示。

我该怎么做呢？

我的表格代码>>

<h1>Your Name and Address</h1>
  <form action="/">
      <div class="nameDiv">
          Name: <input type="textbox" name="firstname" title="name" id="name" required>

          <div class="dotOne"> ?
          <span class="nameHelp"> This is the correctly formatted name of the user entering the details  </span>
          </div>
      </div>
      <br>
      <div class="addressDiv">
          Address: <input type="text" name="lastname" id="address">
          <div class="dotTwo">?
          <span class="addressHelp"> This is the correctly formatted name of the user entering the details  </span>
          </div>
      </div>
      <br>
      <div class="emailDiv">
          Email:
          <input type="text" name="Email" id="email">
          <span class="dotThree">?
          <span class="emailHelp"> This is the correctly formatted name of the user entering the details  </span>
          </span>
      </div>
      <br>
      <div class="numberDiv">
          Phone number:
          <input type="text" name="Phone number" id="number">
          <span class="dotFour">?
          <span class="numberHelp"> This is the correctly formatted name of the user entering the details  </span>
          </span>
      </div>
      <br>
  </form>

Answer 1

如果您正在寻找类似的东西，这会有所帮助。 您要求的tooltip位于文本字段的顶部。 工具提示的颜色可能不好，但希望对您有帮助。

 #Name {background-color: grey;} #Address {background-color: grey;} * {box-sizing: border-box} #save-btnOne{ cursor: pointer; margin-top: 10px; background-color: green; color: white; font-weight: bold; height: 25px; width: 80px; } .asterisk::after{ content: '*'; color: #EF5F5F; float: right; } #save-btnTwo{ cursor: pointer; margin-top: 10px; background-color: green; color: white; font-weight: bold; height: 25px; width: 80px; } /* Set height of body and the document to 100% */ #container { width: 400px; height: 420px; margin: 0; font-family: Arial; display: none; position:absolute; top:20px; left: 400px; } .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9; } /* Style tab links */ .tablink { background-color: white; color: black; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 200px; } .tablink:hover { background-color: white; } /* Style the tab content (and add height:100% for full page content) */ .tabcontent { color: white; display: none; padding: 100px 20px; height: 100%; } .nameHelp{ position: relative; display: inline-block; left: 25px; } .dotOne .nameHelp { visibility: hidden; color: black; z-index: 4; transition: opacity 0.3s; left: -200px; top:-80px; position: relative; display: inline-block; } .dotOne .nameHelp::after { position: absolute; } .dotOne:hover .nameHelp { visibility: visible; } .addressHelp{ position: relative; display: inline-block; left: -200px; top:-80px; } .dotTwo .addressHelp { visibility: hidden; color: black; z-index: 4; transition: opacity 0.3s; left: -200px; top:-80px; position: relative; display: inline-block; } .dotTwo .addressHelp::after { position: absolute; } .dotTwo:hover .addressHelp { visibility: visible; } .emailHelp{ position: relative; display: inline-block; border: 1px black; left: -200px; top:-80px; } .dotThree .emailHelp { visibility: hidden; color: black; z-index: 4; transition: opacity 0.3s; left: -200px; top:-80px; position: relative; display: inline-block; } .dotThree .emailHelp::after { position: absolute; } .dotThree:hover .emailHelp { visibility: visible; } .numberHelp{ position: relative; display: inline-block; left: 25px; } .dotFour .numberHelp { visibility: hidden; color: black; z-index: 4; transition: opacity 0.3s; left: -200px; top:-80px; position: absolute; display: inline-block; } .dotFour .numberHelp::after { position: absolute; } .dotFour:hover .numberHelp { visibility: visible; } .tooltip:after{ content:""; width:10px; height:10px; position:absolute; background-color:red; left:50%; transform:rotate(45deg); top:60px; } .tooltip{ position:absolute; width:150px; color:white; background-color:red; border-radius:10px; top:0px; z-index:2; } .btn{ background-color: red; color: white; font-weight: bold; height: 25px; cursor: pointer; } #name{ width: 200px; position: absolute; left: 120px; } #NameTransfer{ width: 200px; position: absolute; left: 150px; } #NameTransfer{ width: 200px; position: absolute; left: 150px; } #LastNameTransfer{ width: 200px; position: absolute; left: 150px; } #address{ width: 200px; position: absolute; left: 120px; } #email{ width: 200px; position: absolute; left: 120px; } #number{ width: 200px; position: absolute; left: 120px; } #TitleTransfer{ width: 200px; position: absolute; left: 150px; } #LastNameTransfer{ width: 200px; position: absolute; left: 150px; } #AddressTransfer{ width: 200px; position: absolute; left: 150px; } #EmailTransfer{ width: 200px; position: absolute; left: 150px; } #NumberTransfer{ width: 200px; position: absolute; left: 150px; } #LineOneTransfer{ width: 200px; position: absolute; left: 150px; } #LineTwoTransfer{ width: 200px; position: absolute; left: 150px; } #SuburbTransfer{ width: 200px; position: absolute; left: 150px; } #StateTransfer{ width: 200px; position: absolute; left: 150px; } #CountryTransfer{ width: 200px; position: absolute; left: 150px; } .name{ width: 200px; position: absolute; left: 150px; } .address{ width: 200px; position: absolute; left: 150px; } .LineOne{ width: 200px; position: absolute; left: 150px; } .email{ width: 200px; position: absolute; left: 150px; } .number{ width: 200px; position: absolute; left: 150px; } .LineDiv { padding-top: 5px; padding-bottom: 5px; } .nameDiv{ padding-top: 5px; padding-bottom: 5px; } .nameDivOne{ padding-top: 5px; padding-bottom: 5px; } .addressDiv{ padding-top: 5px; padding-bottom: 5px; } .emailDiv{ padding-top: 5px; padding-bottom: 5px; } .numberDiv{ padding-top: 5px; padding-bottom: 5px; } .dotOne { border-bottom: 1px dotted black; text-align: center; height: 25px; width: 25px; background-color: green; border-radius: 50%; display: inline-block; color: white; font-weight: bold; position: absolute; left: 355px; } .dotTwo{ text-align: center; height: 25px; width: 25px; background-color: green; border-radius: 50%; display: inline-block; color: white; font-weight: bold; position: absolute; left: 355px; } .dotThree { text-align: center; height: 25px; width: 25px; background-color: green; border-radius: 50%; display: inline-block; color: white; font-weight: bold; position: absolute; left: 355px; } .dotFour { text-align: center; height: 25px; width: 25px; background-color: green; border-radius: 50%; display: inline-block; color: white; font-weight: bold; position: absolute; left: 355px; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <h1>Your Name and Address</h1> <form action="/"> <div class="nameDiv"> Name: <input type="textbox" name="firstname" title="name" id="name" required> <div class="dotOne"> ? <span class="tooltip nameHelp"> This is the correctly formatted name of the user entering the details </span> </div> </div> <br> <div class="addressDiv"> Address: <input type="text" name="lastname" id="address"> <div class="dotTwo">? <span class="tooltip addressHelp"> This is the correctly formatted name of the user entering the details </span> </div> </div> <br> <div class="emailDiv"> Email: <input type="text" name="Email" id="email"> <span class="dotThree">? <span class="tooltip emailHelp"> This is the correctly formatted name of the user entering the details </span> </span> </div> <br> <div class="numberDiv"> Phone number: <input type="text" name="Phone number" id="number"> <span class="dotFour">? <span class="tooltip numberHelp"> This is the correctly formatted name of the user entering the details </span> </span> </div> <br> </form> </body> </html> 

Answer 2

我已经尝试了以下CSS更改。

right: 105%; 有助于将工具提示向左对齐。

width: 250px; .numberHelp中的可以更改为适合文本框，并建议使用background-color 。

.numberHelp {
  position: relative;
  display: inline-block;
  border: 1px black;
  width: 250px;
}

.dotFour .numberHelp {
  visibility: hidden;
  color: black;
  transition: opacity 0.3s;  
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

完整的代码在这里-JS Fiddle

也可以对其他div的其他CSS属性进行类似的更改。

Answer 3

您要问的内容有些困难，因为您希望工具提示准确地定位在文本字段上。 两者的大小都可以根据内容而变化，位置也可以根据屏幕或窗口的大小而变化。 更不用说样式选择及其效果。

我建议您改为使用占位符属性作为输入标签：

<input type="textbox" name="firstname" title="name" id="name" 
       placeholder="User's name in correct format"
       required>

另外，考虑更改工具提示的内容，因为它有点大。 例如，更好的工具提示可以解释名称的正确格式是什么。