htmlの入力をクリックするとヒントが表示される

Question

現在、HTML、CSS、PHPプロジェクトを作成中です。ユーザーがフォーム上の入力フィールドをクリックしたときに、ユーザーに小さな説明を提供するためのツールチップを表示したい。私はツールヒントを入力フィールドの隣に表示するが、フォームを少し重ねる代わりに、代わりにフォームの端を囲むように見えるようにしたい。私はツールチップのZ-インデックスを1に変更しようとしましたが、何の違いもありませんでした。 HTML、CSS、およびJQueryを使用することで、このような問題が解決されました。以下は私がこれを行うのに使ったコードです。以下

形態以下

<form action="index.php" method="post" style="margin-top: auto; margin-bottom: auto;"> 
    <table class="formTable"> 
     <tr><td> 
    <label for="txtUsername">Username: </label> 
    </td> 
    <td> 
      <input class="forms" type="text" name="txtUsername" placeholder="Username" required autofocus /> 
      <span class="tooltip" style="z-index: 1;">Please enter your username</span> 
     </td> 
     </tr> 
     <tr>      
      <td> 
      <label for="txtPassword">Password: </label> 
      </td> 
      <td> 
      <input class="forms" type="password" name="txtPassword" placeholder="Password" required /><br /> 
      </td> 
      </tr> 
      <tr><td colspan="2"> 
       <div class="buttonGroup"> 
       <input class="button" type="submit" name="btnSubmit" text="Submit" /> <input class="button" type="reset" text="Reset" />  </div> 
      </td> 
      </tr> 
     </table> 
     </form> 

ためのコードであり、フォームの下

form 
{ 
    width: 500px; 
    text-align: center; 
    height: auto; 
    background-color: #95b0ff; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px; 
    border-width: 1px; 
    border-color: black; 
    border-style: solid; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px; 
    z-index: 1; 

} 

のCSSコードは、ツールチップの下

.tooltip { 
    padding: 5px; 
    margin-left: 50px; 
    background: #666; 
    /*border: 1px solid #606060;*/ 
    border: 1px solid white; 
    color: #ddd; 
    -border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    box-shadow: 0 1px 3px #111; 
    -moz-box-shadow: 3px 3px 1px #999; 
    -webkit-box-shadow: 3px 3px 1px #999; 
    z-index: 2; 
} 

ためのCSSはjQueryのですツールチップを表示するには

$(function() { 
    $('.tooltip').hide(); 
    $('.tooltip').prev('input').focus(function(){ 
     $(this).next().fadeIn('slow'); 
    }).focusout(function(){ 
     $(this).next().fadeOut('slow'); 
    }); 
}); 

ご協力いただきありがとうございます。

更新 @Rikudo Senninのおかげで、これはうまくいきました。私が今持っている唯一の問題は、ツールチップではなく、それは

Answer 1

親にposition: relativeを使用して、ツールチップ上position: absolute。またWorking Example

は、無関係なノートに、for=マッチングid=と<input>のため<label>の検索のための属性がないname=秒です。

Answer 2

ない、これはあなたが探しているものであることを確認してください下の画像のように、わずかに下に表示され、入力フィールドの横に表示されていないということです。

.tooltip { 
    position:absolute; 
}