私はリストをJSP上に表示しています。いずれかの値をマウスでホバーすると、その値に対応する説明を表示する必要があります。説明をアラートとして表示する必要はなく、ハイパーリンクとして値を設定することもできません。例えば、 。 値がABCなので、マウスのホバーでAppleBoyCatが表示されるはずです。 はonmouseoverを使用する必要があります。次の2つの方法でそれについて移動することができますonmouseoverの使い方は？
..私はそれを行う方法を知っている：
1 - あなたはどんな
をロールオーバー時に自分自身を明らかに隠されたDOMオブジェクト（例えばDIV）または
2 - マウスオーバーしている特定の要素のhtmlを書き換えることができます。
このデータを読み込むときは、他のものを読み込むときに（JavaScriptオブジェクトとしても、マークアップとしても大丈夫だが）、またはマウスオーバー時に非同期的に記述データをロードすることができますより遅れている）。
jQueryは、これを達成するための迅速かつ汚れた方法です（汚れたよりも速い）が、まっすぐなJSか他のほとんどのJSライブラリも同様に機能します。
何をしますか？ツールヒントを表示したいだけなら、要素のタイトル属性を設定することができ、それはツールチップとして表示されます。おそらく、
<abbr title="test">stuff</abbr>
しかし、実際には略語の場合にのみabbrを使用してください。それ以外の場合は、一般的な要素のtitle属性を使用してください。 – DanMan
ないクリーンなソリューションが、このような何か：
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
そしてoffcourse再びそれを隠してコールバックを追加しすぎツールチップとして
また、abbrタグが使用できます。それは単にリンクのrelから値をとり、表示するdivのidとして使用します。
これはすばやく汚れた解決策です。ちょっとした作業をすればよりスムーズにできます; 同じ機能をより洗練された方法で提供するプラグインがたくさんあります。
*編集：jQueryを使用できない別の投稿にコメントを追加したことに気付きました。使用しない予定の投稿にタグを付けるべきではありません。
OPはすでに彼はjQueryを使うことができないと言いました。 –
私が編集で追加したように、そのコメントが追加される前に投稿を書き始めました。投稿がjQuery（今は削除されている）としてタグ付けされていることを考えれば、jQueryを使って簡単な方法で答えるのは自然でした。この関数は、とにかくそれを行う素晴らしい方法ではなく、より多くのポインタを使用してどの方向に使用できるかを示します。しかし、jQueryの部分が削除された後の非常に有益なアドバイスはありません – Sondre
TJHeuvelは既に述べたように、単にtitleという属性を使用するだけです。
最良の方法は、JSP内からvalue属性とtitle属性の両方を使用してリストを作成することです。何らかの理由で可能でない場合は、各値のクライアント側配列と対応する記述を作成し、JavaScriptを使用して動的にタイトルを割り当てます。マウスオーバー。
より多くの/より良いヘルプを得るためにいくつかのコードを表示してください。シンプルなツールチップのために
あなたはHTMLとCSSの書式設定で、より高度なツールチップが必要な場合は、私はあなたが外部ライブラリを使用することをお勧めしたいTJHeuvel
で指摘したように、title属性は、最も効果的です。 jQueryのイストのwz_tooltip download hereなしでうまく動作一つ、documentation here
正しく含まれる場合、あなたは次のように機能しTip()とUnTip()を呼び出すことでツールチップを追加することができます。
<a href="index.htm" onmouseover="Tip('tip text')" onmouseout="UnTip();">Homepage </a>
あなたは1つの方法の一例を欲しがるしてくださいすることができますマウスの位置でdivを開きます。 – Himanshu