Jqueryを使用したフォーム要素のhelpicon機能

Question

説明付きのすべてのフォーム要素に対してhelpIconを使用して以下のフォームを作成しています。 jqueryを使用してヘルプアイコンとマウスアウトにカーソルを置いたときにヘルプを表示する方法はありますか？ jqueryのために新しいです。誰かが簡単に実装できるのですか？

<table> 
 
    \t <tbody> 
 
    \t \t <tr><td> 
 
    \t \t \t Name: 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t \t <input type="text" name="name" class="dipika"> 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t <img src="help.png" id="imgNamehelp"> 
 
    \t \t </td> 
 
    \t \t <td><div id="divNamehelp" style="display: none;"> This is Full Name</div></td> 
 
    \t \t </tr> 
 
    \t \t <tr><td> 
 
    \t \t \t Color: 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t \t <input type="radio" value="red" name="Color" class="dipika"> Red 
 
    \t \t \t <input type="radio" value="yellow" name="Color" class="dipika"> Yellow 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t <img src="help.png" id="imgColorhelp"> 
 
    \t \t </td> 
 
    \t \t <td><div id="divColorhelp" style="display: none;"> This is color choice</div></td> 
 
    \t \t </tr> 
 
    \t \t <tr><td> 
 
    \t \t \t Hobbies: 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t \t <input type="checkbox" value="cricket" name="cricket" class="dipika"> Cricket 
 
    \t \t \t <input type="checkbox" value="kabdi" name="kabdi" class="dipika"> Kabadi 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t <img src="help.png" id="imgHobbieshelp"> 
 
    \t \t </td> 
 
    \t \t <td><div id="divHobbieshelp" style="display: none;"> This is Hobbies choice</div></td> 
 
    \t \t </tr> 
 
    \t \t <tr><td> 
 
    \t \t \t Address: 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t \t <textarea class="dipika"></textarea> 
 
    \t \t </td> 
 
    \t \t <td> 
 
    \t \t <img src="help.png" id="imgAddresshelp"> 
 
    \t \t </td> 
 
    \t \t <td><div id="divAddresshelp" style="display: none;"> This is Hobbies choice</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table>

誰がこの問題に役立つことはできますか？前もって感謝します。 1つの答えが従うことが最善である

Answer 1

$(document).ready(function(){ 

      $('img[src="help.png"]').mouseover(function(){ 

       $('#'+getDivId(this)).fadeIn(500); 
      }).mouseout(function(){ 

       $('#'+getDivId(this)).fadeOut(500); 
      }); 
      function getDivId(helpId){ 
       var helpId = $(helpId).attr('id'); 
       return helpId.replace('img','div'); 
      } 

    }); 

Answer 2

$(document).ready(function(){ 

      $('img[src="help.png"]').hover(function(){ 

       $('#'+getDivId(this)).fadeIn(500); 
      },function(){ 

       $('#'+getDivId(this)).fadeOut(500); 
      }); 
      function getDivId(helpId){ 
       var helpId = $(helpId).attr('id'); 
       return helpId.replace('img','div'); 
      } 

    });