jQueryを使用してツールチップに似た効果を作成しようとしています。オフセットプロパティを複数回設定すると、要素がjQueryの新しい場所にジャンプします。
同じ<div>要素（id="tooltip"）を再利用して、ツールチップを表示しています。したがって、ユーザがツールチップを表示する要素の上にカーソルを移動するたびに、常にこの<div>要素を移動する必要があります。 offset()プロパティを使用すると、最初は正常に動作しますが、マウスをあるアイコンから別のアイコンに繰り返し移動すると、ツールチップが別の場所にジャンプし始めます。あなたがここでそれを試してみることができ
：
を繰り返し、他の1つのアイコンからマウスを移動してみてください、あなたはツールチップが間違って周りにジャンプしていることに気づくでしょう。常に上に乗っているアイコンのすぐ右に表示する必要があります。
コードにはいくつかの問題があります。
のdiv要素は、自己終了タグはありません。
<div /> <!-- Wrong -->
<div></div> <!-- Good -->
あなたは空のdivを持っているとき、彼らは身体を持っていることを確認するためにあなたのCSSで次の宣言を追加します。
div {
content: "";
}
jQueryのoffset()あなたの隠された#tooltipのために、あなたの場合、関数がバギーに見えます。そのオフセットを変更するには、次のコードを好む：
$('#tooltip').css({
top: o.top,
left: o.left
});
また、oの作成は非常に役に立たないようです。
var offset = $(this).offset();
offset.left += $(this).width();
$('#tooltip').css({
top: offset.top,
left: offset.left
});
最後に、セレクタと同じ要素に複数回アクセスしないようにしてください：あなたは直接offset変数を変更する必要があります。 jQueryは、呼び出すたびにDOMツリー全体で要素を見つける必要があります。
var tooltip = $("#tooltip"); // Use it in mousenter/mouseleave => Avoids 2 useless selections
// In your mousenter function
var el = $(this); // Use "el" to get offset/width => 1 useless selection avoided
あなたは働くjsfiddle hereを見つけることができます。
私はJQueryとjavascriptに数日掛かりました。私の自宅で作成したツールチップは、時折画面の奇妙な部分にジャンプしていました。 Joomlaのデバッグ位置の位置変数をトラッキングすると、そこに何か問題は見られませんでした。ツールチップが正しい場所に移動するよう指示されました。それはちょうどすべての時間に素直に行きません。私はこの投稿を見て、それは良い意味合いがあったので、私は複数回呼び出していたセレクタの変数を作成しました。私はまだオフセットを使用しているので、位置を設定するためにCSSを使用する限りさえ取得していない。にもかかわらずジャンプの問題は完全に解消されましたが、私はツールチップのポジショニングをもうすこし見事にすることはできません。あなたが新しい誰かのために期待していたように、これで少し時間を無駄にしましたが、私はいつもすぐに変数を宣言しています。それだけでなく、それがDelphiでどのように行われたかです。
要素が隠されている場合、Jquery関数.offset()はうまく機能しません。投稿を参照してください：jquery: get the offset of hidden element