Tooltip-Bild in der Nähe des Mauszeigers beim Scrollen div halten?

Question

Ich habe ein span-Element, das mehrmals im Text vorkommt, das immer ein Kind Element hat, das als eine taugliche Bild-Tooltip fungiert, durch diese Stile;

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

wo der Text wäre <span className="tooltipLink">something like this<img src="linkToImg.jpg"></span>. Ich habe jetzt angefangen, diese Bereiche zu einem Abschnitt meiner Seite hinzuzufügen, der in sich scrollt (es ist ein div mit max-height:500px und overflow-y:scroll), und das Schweben über die Spannen in diesem div gibt entsetzlich versetzte Ergebnisse nach unten, was normalerweise dazu führt, dass das Bild nicht sichtbar ist auf der Seite. Ich habe alle möglichen layout Schlüsselwörter versucht, aber nichts behebt das Problem. Es ist in Ordnung, wenn das div-Objekt ganz nach oben gescrollt wird. Wenn Sie jedoch das div-Element nach unten scrollen, um andere Bereiche anzuzeigen, wird das QuickInfo-Bild schrittweise nach unten verschoben, bis es vollständig verschwindet.

Wenn ich die Position zu inherit ändere, geht es zumindest in die Nähe der Spanne, die es ausgelöst hat, aber es schiebt den Text beiseite, anstatt darüber zu schweben (trotz der z-index). Das ist das nächste, das ich bis jetzt bekommen habe.

Answer 1

hat Ihre .tooltipLinkposition:relative?

.tooltipLink { 
    position:relative; 
} 

demo