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>

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

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

3 个答案: