ポップアップでマウスをホバーに移動

Question

私はasp.net C＃を使用してウェブサイトをやっています。マウスが特定の単語にカーソルを合わせるとすぐに小さなウィンドウに情報をポップアップしたいと思います。私はjqueryを使用しなければならないことを知っていますが、私はjQueryの使い方を正確にはわかりません。

お願いします。

Answer 1

あなたが探しているものを達成するのに役立つ多くのプラグインがあります。しかし、この機能を自分で実装することも非常に可能です。あなたが遭遇するプラグインのいくつかにも同様のコードを使用すると、私は驚くことはありません。

以下は、ツールヒント/ポップアッププラグインの動作を解明しようとした私の試みです。

<span>要素で目的の単語を囲み、.hoverクラスにすることができます。

<div> 
    This is some text with a <span class="hover">special</span> 
    word that has hovercraft capabilities. 
</div> 

あなたのjQuery（ver 1.7+）はこのようになります：

$(".hover").on('mouseenter',function(){ 
    // The popup must be shown here (mouse is over element). 
}).on('mouseleave',function(){ 
    // The popup must be hidden here (mouse has left element). 
}); 

私はjQueryのの偉大な、まだ時々忘れ機能は「チェーン」と呼ばれる使用していますことをここに追加してください。 on()関数は、実際にそれが接続されたオブジェクトを返します。この場合、$(".hover") - そのオブジェクトの別の関数を呼び出したい場合は、最後に別の関数として追加することができます。これの別の例は、次のようになります

$("#myElement").text("An error has occured!").css("color","#FF0000");

コードの行も#myElementにテキストに、また赤色を回すだろう。あなたの実際のポップアップに関しては

- 私は二つのことを示唆している：

1. は、あなたのマークアップ（最後に書かれたので、最高のインデックスの一番下にある要素持っている - または手動で最高のzインデックスを設定します）
2. また、ポップアップをトリガするはずの要素のすぐ横の隠し要素にポップアップを表示することもできます。

Answer 2

「ツールチップ」のように聞こえるでしょう。

jQueryを使用したソリューションは多少関わっているので、私は外部リソースに向けるだけです。

考えられる解決策：スパンで、それが働いているようではありません.hover

• ToolTip Plugin for jQuery
• Build a Better Tooltip with jQuery Awesomeness