2011-10-30 9 views
2

私はこのように見て選択リスト項目があります。私がやりたい何ユーザーが異なる選択リスト項目を移動したときにホバーメッセージを表示するにはどうすればよいですか?

<option>- Data source A -</option> 
<option>- Data source B -</option> 

はホバーメッセージを持つことで、ユーザーが選択リストの項目にカーソルを合わせると選択ボックスの近くに表示されます。たとえば、ユーザーが最初のオプションを上に移動すると "North West regionのデータ"というメッセージが表示され、ユーザーが2番目のオプションを上書きすると "South West regionのデータ"が表示されます。

HTML5(これは内部で、最新のブラウザを使用しています)、jQueryなどの方法でこれを行うことができます。

+0

どのように選択リストを作成していますか?それは静的か動的か? – arb

+0

私はリストを動的に構築しています。私はデータベースに行き、オプションリストを作成してjQueryを使って選択用のHTMLを設定します。選択テキストは非常に長いです。可能であれば、最初の20文字をオプションリストに入力して残りの部分をツールチップとして表示させていただきたいと思います。 –

答えて

2

私が行うことは、選択リストオプションのデータ属性の中のテキストにカーソルを置くか、$.data()を使用して保存することです。私はあなたがリストをどのように構築しているかを100%確信していないので、ホバーテキストをどのように保存するかについては明確に言えません。

次に、qTipプラグインを使用して、テキストの上にカーソルを置くことができます。これには、プラグインがホバー上に表示する情報をどこにプルするかを指示するオプションと例があります。あなたは

$('#selector-id option').qTip({ 

}); 

contentオプション使用することができ

セレクタはどこ表示テキストを取得するプラグインを伝えたいと思います場所です。

-1

これらのいずれかを指定できます。jQuery Tooltip Plugins

+0

何がありますか? Option要素は、これは単なるサンプルテキストでイベント –

+0

をホバーに応答しません:。 '$(関数(){ \t \t $( 'オプション')(関数(){ \t \t \t $(this)を置きます。 ; – Dev

+0

それは何もしません:http://jsfiddle.net/P4teh/() –

関連する問題