Hinzufügen von Tooltip zu Div mit einem Überlauf

Question

Ich entwickle einen horizontalen scrollbaren Abschnitt mit mehreren aufgeführten Elementen. Jedes aufgelistete Element enthält eine QuickInfo, die beim Hover über dem genannten Element angezeigt werden sollte. Da das übergeordnete div ein scrollbarer Abschnitt ist, muss der Tooltip relativ zu den aufgelisteten Elementen positioniert werden. Dies führt jedoch dazu, dass der Tooltip aufgrund des auf dem übergeordneten Element eingestellten "overflow-x: scroll" verschwindet. Ich bin jetzt wirklich ratlos. Irgendwelche Vorschläge würden sehr geschätzt.

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%; 
} 

Ich habe versucht, eine Geige zu schaffen, aber es sieht aus wie etwas gibt es verhindert mir das Layout bricht so den Code tatsächlich auf den Link funktioniert gut unten ohne Überlauf. Ich werde den Link hier trotzdem verlassen. https://jsfiddle.net/xjrkt2fe/3/

Answer 1

Ja, Inhalte außerhalb Ihres Scroll-Divs werden durch die Grenzen des Divs verborgen/beschnitten.

Ihre Optionen sind: 1) die Größe der div erhöhen, um die Tooltips unterzubringen (meistens wahrscheinlich keine Option). oder 2) füge die Tooltips irgendwo außerhalb des divs hinzu und positioniere sie manuell neben den Elementen im div auf hover. Dies umfasst wahrscheinlich auch die Kollision mit den Bildschirmkanten, die Aktualisierung der Position beim Scrollen des Bereichs usw. Möglicherweise können Sie dem letzten Problem ausweichen, wenn sich die QuickInfo beim Scrollen einfach ausblenden lässt.

Je nachdem, welches Framework/welche Bibliothek/etc. Sie verwenden etwas, um etwas davon für Sie zu tun. Wenn nicht, wäre etwas wie jQuery UI's .position() - Methode oder Tether http://github.hubspot.com/tether/ dafür sehr praktisch.