スクロールしているdivのマウスポインタの近くにツールチップイメージを置いておきますか？

Question

私は、いつも子供が<img>の要素を持つテキストで複数回出現するスパン要素を持っています。この要素は、これらのスタイルを通して、ホバーブルイメージツールチップとして機能します。

.tooltipLink img { 
    float:left; 
    display:none; 
} 
.tooltipLink:hover img{ 
    display:inherit; 
    position:absolute; 
    z-index:1000; 
    overflow:hidden; 
    border-radius: 13px; 
} 

ここで、テキストは<span className="tooltipLink">something like this<img src="linkToImg.jpg"></span>となります。私は今、これらのスパンを自分自身の中でスクロールする部分（max-height:500pxとoverflow-y:scrollのdivです）に追加し始めました。このdivのスパン上にマウスを置くと、結果が下に向かってひどくオフセットされ、通常は画像が見えなくなりますページ上に私はすべての種類のlayoutキーワードを試しましたが、実際に問題を修正するものはありません。 divが上までスクロールされている間は問題ありませんが、divをスクロールして他のスパンを表示すると、ツールチップの画像はページが完全に消えるまで徐々に下に移動します。

位置をinheritに変更すると、少なくともそれをトリガーしたスパンに近づきますが、（z-indexにもかかわらず）その上にカーソルを置くのではなく、テキストを脇に押してしまいます。それは私が今までに得た最も近いものです。

Answer 1

あなたの.tooltipLinkにはposition:relativeがありますか？

.tooltipLink { 
    position:relative; 
} 

demo