html - 工具或帮助提示不适用于所有多个字段

Question

代码更改后更新图像

但是从我下面的代码来看，'help-tip' 类只出现在一个字段中。

出现在“输入代码编号”字段旁边的现有帮助提示显示“输入注册编号!”悬停。为什么不申请这两个领域。

根据评论更新

<div class="tabbed" >

  <input name="tabbed" id="tabbed1" type="radio" checked>
  <section>
    <h1>
      <label for="tabbed1">Legal Details</label>
    </h1>
    <div>
        <form name="Legal_details">
            <!--Begin: Help tip-->
                <span class="help-tip">
                <span > Enter your code number! </span>
                </span>
            <!--End: Help tip-->    
                <select selected="selected" name="code_number">
                    <option value="default">Enter Code number *</option>
                    <option value="title1">Code 1</option>
                    <option value="title2">Code 2</option>
                    <option value="title3">Code 3</option>
                    <option value="title4">Code 4</option>
                </select></br></br>

            <span class="help-tip">
                <span > Enter Reg number! </span>
            </span> 
            <input type="text" name="registration_number" size="25" placeholder="Registration Number *" required></br></br>             
       </form>
      </div>
    </section>
</div>

下面是我的.css:

根据评论更新

.help-tip{
    position: relative;   /*UPDATED*/
    display:inline-block; 
    opacity:0.9;          
    top: 2px;
    left:253px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover span{
    display:block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip span{
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 5px;
    width: 200px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    left: 5px;            /* edited */
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip span:before{
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    left:10px;
    top:-12px;
}

.help-tip span:after{
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

Answer 1

我认为问题出在 position:absolute 也只是将帮助提示放在它对应的输入之后。

所以我设法创建了一个 Belllow 示例:

.help-tip{
    #position: relative;  /* removed */
    display:inline-block; /* added */
    opacity:0.9;          /* added */
    top: 7px;
    left: 165px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover span{
    display:block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip span{
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 5px;
    width: 200px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    left: 5px;            /* edited */
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip span:before{
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    left:10px;
    top:-12px;
}

.help-tip span:after{
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

<div class="tabbed" >

  <input name="tabbed" id="tabbed1" type="radio" checked>
  <section>
    <h1>
      <label for="tabbed1">Legal Details</label>
    </h1>
    <div>
        <form name="Legal_details">
             
            <select selected="selected" name="code_number">
                <option value="default">Enter Code number *</option>
                <option value="title1">Code 1</option>
                <option value="title2">Code 2</option>
                <option value="title3">Code 3</option>
                <option value="title4">Code 4</option>
            </select>
            <!--Begin: Help tip-->
            <span class="help-tip">
                <span > Enter your code number! </span>
            </span>
            <!--End: Help tip-->   <br><br>
            
            <input type="text" name="registration_number" size="25" placeholder="Registration Number *" required />
            <span class="help-tip">
                <span > Enter Reg number! </span>
            </span>
            <br><br>              
       </form>
      </div>
   </section>
</div>