私は確信していますが、それはわかりません。ユーザーが各フィールドにいるときに小さなメモのポップアップを作成するにはどうすればよいですか?彼らが名前の欄に行くと言うように。右側の名前欄をクリックするとすぐに、小さなメモが表示され、「名前を必ず使用する」のようなメッセージが表示されます。私は私が持っているいくつかのフィールドのためにこれをしたい。これどうやってするの?入力フィールドのフォーカスの後のツールチップ
0
A
答えて
1
ツールチップをお探しですか?これらのコレクションをsmashing magazineからチェックアウトします。
1
私はこのプラグインをあなたが求めているものに使用します。 JQuery tooltip
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>
関連する問題
- 1. Android Hijacksフォーカス中の入力フィールドのCSS?
- 2. 次の入力フィールドにIpadフォーカス
- 3. Vuejs - 提出後に入力フィールドを再フォーカスする
- 4. Vue.js 1つの文字の入力後に入力フィールドのフォーカスが失われます
- 5. CkEditorの入力フォーカス
- 6. 入力フォーカスのスタイルアイコン
- 7. 入力の右側のツールチップ
- 8. 入力フィールド上でマウスのホバー表示のツールチップ
- 9. React ES6では、文字を入力した後に入力フィールドがフォーカスを失うのはなぜですか?
- 10. フィールド入力後の色の変更 - CSS
- 11. 入力フィールドをフォーカスするためのディレクティブの使用
- 12. テーブルの次の入力フィールドにフォーカスを設定
- 13. 入力フィールドのフォーカスにグリフコンのスタイルを変更します。
- 14. Knockout.jsクリックフォーカス後にフォーカスを入力
- 15. Android EditText:入力後にフォーカスを失う
- 16. 入力中に入力フィールドのフォーカスが失われています(AJAX Search)
- 17. 提出後のプロセス入力フィールド
- 18. React Nativeの入力フィールドからフォーカスをクリアするには?
- 19. 入力フィールドの角1.xフォーカスは一度だけ有効
- 20. Mottie Keyboard:入力フィールドがmaxlengthのときにフォーカスを変更
- 21. React/Redux:componentWillReceivePropsのフォーカス入力フィールドが機能しない
- 22. sap.ui.table.Tableの入力フィールドにフォーカスを設定する方法
- 23. 入力フィールドの代わりにボタンをフォーカス
- 24. Twitterのブートストラップドロップダウン入力フィールドがフォーカス()メソッドで動作しない
- 25. 最後のタブを通過した後、入力フィールドにどのように再フォーカスしますか?
- 26. フレックステキスト入力フォーカス
- 27. フォーカス入力ボックスオンロード
- 28. jquery fancyboxの入力フォーカス
- 29. 計算後の入力のフォーカスを設定する方法
- 30. 入力ツールチップを他の入力の前にする方法は?
私たちに必要なものを提供するサイトの例を挙げてください。そうすることで、特定のコードを提供したり、他のコードとのやりとりを解読することさえできます。 –
https://twitter.com/signup – AAA
それは良いです:)私の例はあなたが望むものです。 'span.note'要素のスタイルを変更して、より見やすくしたい場合はバックグラウンドイメージを持つことができます。 –