2011-01-27 35 views
0

私は確信していますが、それはわかりません。ユーザーが各フィールドにいるときに小さなメモのポップアップを作成するにはどうすればよいですか?彼らが名前の欄に行くと言うように。右側の名前欄をクリックするとすぐに、小さなメモが表示され、「名前を必ず使用する」のようなメッセージが表示されます。私は私が持っているいくつかのフィールドのためにこれをしたい。これどうやってするの?入力フィールドのフォーカスの後のツールチップ

+1

私たちに必要なものを提供するサイトの例を挙げてください。そうすることで、特定のコードを提供したり、他のコードとのやりとりを解読することさえできます。 –

+0

https://twitter.com/signup – AAA

+1

それは良いです:)私の例はあなたが望むものです。 'span.note'要素のスタイルを変更して、より見やすくしたい場合はバックグラウンドイメージを持つことができます。 –

答えて

1

ツールチップをお探しですか?これらのコレクションをsmashing magazineからチェックアウトします。

1

FlowPlayer.orgには、使用できるjQueryツールチッププラグインがあります。あまりにも参考のためにここに貼り付けhttp://jsbin.com/iruyo3

コード:ここでは、フォーム上でそれを使用してのデモの

チェックthis(それはあなたの条件に合っ)

1

は簡単な例です。

<!doctype html> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
     html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 } 
     body { font:normal 62.5% tahoma; margin:20px } 

     #myForm .note { display:none; } 
     #myForm fieldset { border:0 } 
     #myForm label { width:100px; float:left; height:25px; line-height:25px; text-align:right; padding-right:10px } 


    </style> 
    </head> 
    <body> 

    <form id="myForm"> 

     <fieldset> 
     <label>Name</label> 
     <input type="text" name="fullname"> 
     <span class="note">Enter your full name.</span> 
     </fieldset> 

     <fieldset> 
     <label>Company</label> 
     <input type="text" name="fullname"> 
     <span class="note">Enter your work place.</span> 
     </fieldset>  

    </form> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $('#myForm input:text').focus(function(){ 
     $('.note').hide(); 
     $(this).next().fadeIn(); 
     }); 
    }); 
    </script> 
    </body> 
</html> 
関連する問題