オーバーフローでdivにツールチップを追加する

Question

複数のリスト項目を含む水平スクロール可能セクションを作成しています。リストされた各アイテムには、上記のホバー上のアイテムの上に表示されるべきツールチップが含まれています。親divはスクロール可能なセクションなので、リストされたアイテムに関連して配置されるようにツールチップが必要ですが、親に「overflow-x：scroll」が設定されているためツールチップが消えるようになります。私は今本当に困っている。どんな提案も大歓迎です。

HTML

<div class="scroller"> 
    <div class="scrollable-item"> 
     <span> Static Text</span> 
     <span> Static Text</span> 
     <div class="scrollable-item-tooltip"> 
     </div> 
    </div> 
    <div class="scrollable-item"> 
     <span> Static Text</span> 
     <span> Static Text</span> 
     <div class="scrollable-item-tooltip"> 
     </div> 
    </div> 
    <div class="scrollable-item"> 
     <span> Static Text</span> 
     <span> Static Text</span> 
     <div class="scrollable-item-tooltip"> 
     </div> 
    </div> 
</div> 

CSS

.scroller { 
    overflow-x:scroll; 
    white-space:nowrap; 
} 

.scrollable-item { 
    position:relative; 
    width:160px; 
    display:inline-block; 
} 

.scrollable-item-tooltip { 
    position:absolute; 
    bottom:100%; 
} 

は、私がバイオリンを作成しようとしたが、コードが実際にリンクを正常に動作しますので、レイアウトを壊すから私を妨げる何かがありますように見えます下にオーバーフローなしで。私はとにかくここにリンクを残すつもりです。 https://jsfiddle.net/xjrkt2fe/3/

Answer 1

はい、スクロールしているdiv外のコンテンツは、divの境界線によって隠され/クリッピングされます。

オプションは次のとおりです。1）ツールチップに対応するようにdivのサイズを増やします（ほとんどオプションではない可能性が高い）。または2）divの外側のどこかにツールチップを追加し、divのホバー上の項目の横にツールチップを手動で配置します。これには、画面のエッジとの衝突の処理、divがスクロールされたときの位置の更新の処理なども含まれる可能性があります。ツールチップをスクロールするだけで隠すことができます。

フレームワーク/ライブラリ/などによって異なります。あなたが使用している場合、あなたのために何かをするために利用できるものがあるかもしれません。もしそうでなければ、jQuery UIの.position（）メソッドやTether http://github.hubspot.com/tether/のようなものは、そのために非常に便利です。