17

私の質問と潜在的な解決策を強調した写真については、次の投稿を参照してください。

CSS オーバーフロー-y:可視、オーバーフロー-x:スクロール

ただし、実際にスクロールバーを移動すると、この戦略は破綻します。推奨される実装 ( position: fixed;) では、ツールチップは子 div の横にスクロール前の位置に表示されます。そのため、新しい子 div をスクロールして表示すると、ツールチップがページの下部から落ち始めます。

バグのデモについては、こちらを参照してください: http://jsfiddle.net/narcV/4/

ツールチップを常に子divの横に表示する方法はありますか?

4

1 に答える 1

1

this questiongetPosの関数を使用して、JavaScriptを使用してこれを実装することになりました。

最終製品は次のようになります。

var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
   var hovered = e.srcElement;
   var pos = getPos(hovered);
   pos.x += hovered.offsetWidth;
   pos.y -= scrollPanel.scrollTop;
   tooltip.style.setProperty('left', pos.x);
   tooltip.style.setProperty('top', pos.y);
}

基本的に、ノードが現在表示されているページ上の場所を計算し (スクロールバーの位置を考慮して)、ツールチップをページ上の適切な場所に手動で配置します。

残念ながら、これを行うためのエレガントな CSS の方法はありませんが、少なくともこれは機能します。

于 2012-04-11T18:19:41.123 に答える