postion:absolut aber nicht ausserhalb vom wrapper

[wKovacs]

Hallo,

ich habe eine Tabelle so breit wie mein wrapper. Für jede Zelle im Header erscheint beim mouse-hover ein mit CSS-erzeugter ToolTip (ein absolut zur Zelle positioniertes span-Element). Der ToolTip erschein zentriert unterhalb der Zelle. Soweit so gut.

Wie kann ich erreichen, das die ToolTips der äusseren Zellen, weiter nach Innen versetzt werden, damit sie nicht nach Aussen über meinen Wrapper bzw die Tabelle hinausragen? Idealerweise automatisch und nicht durch "händische" definition von left und right?

Regards

wKovacs

[beatovich]

hallo

ich habe eine Tabelle so breit wie mein wrapper. Für jede Zelle im Header erscheint beim mouse-hover ein mit CSS-erzeugter ToolTip (ein absolut zur Zelle positioniertes span-Element). Der ToolTip erschein zentriert unterhalb der Zelle. Soweit so gut.

Wie kann ich erreichen, das die ToolTips der äusseren Zellen, weiter nach Innen versetzt werden, damit sie nicht nach Aussen über meinen Wrapper bzw die Tabelle hinausragen? Idealerweise automatisch und nicht durch "händische" definition von left und right?

Sorge für eine Breitenangabe für das letzte th Element im thead. Wende dies als max-width auch auf das zutreffende letzte span Element an das zudem display:block dargestellt werden sollte.

[Rolf B]

Hallo beatovich,

das habe ich gerade mal zu Fiddeln versucht, aber mein Browser hat die Tooltips munter über den Rand laufen lassen (title-Attribut).

Hast Du dazu ein Beispiel?

Rolf

[Auge]

Hallo

das habe ich gerade mal zu Fiddeln versucht, aber mein Browser hat die Tooltips munter über den Rand laufen lassen (title-Attribut).

Mir wäre nicht bekannt, dass man per Title-Attribut erzeugte Tooltips per CSS erreichen könnte. Im OP und bei beatovich war aber von spans, also HTML-Elementen, die als Tooltips benutzt werden sollen, die Rede.

Tschö, Auge

[wKovacs]

damit wird der Tool-Tip nicht breiter als die Zelle. Das würde zwar das Problem umschiffen wäre aber auf Grund des Inhalts des Tool-Tips nicht praktikabel.

Hier mal, mein aktueller Stand: jsfiddle.net

Regards

wKovacs

[beatovich]

hallo

damit wird der Tool-Tip nicht breiter als die Zelle. Das würde zwar das Problem umschiffen wäre aber auf Grund des Inhalts des Tool-Tips nicht praktikabel.

Hier mal, mein aktueller Stand: jsfiddle.net

Regards

wKovacs

Ich habe mal korrigiert zu

.toolTipMsg {
  background-color: rgba(220, 220, 220, 1);
  border: 1px solid black;
  position: absolute;
  right: 0px;
  display: none;
  height: auto;
  text-indent: 0;
  text-align: justify;
  padding: 3px 5px;
  font-weight: normal;
  z-index:5
}

Wenn du noch

.toolTip:hover {background: himmbereis}

ergänzt, ist das mal ein Anfang. Das mit der unteren überschreitung musst du allerdings in Kauf nehmen.

[wKovacs]

Damit ist doch der ToolTip so schmal wie die Zelle. Das Aussehen des ToolTips soll nicht verändert werden, sondern lediglich seine postition so nach rechts bzw. links verschoben werden, so das er innerhalb der Tabelle bleibt.

[beatovich]

hallo

Damit ist doch der ToolTip so schmal wie die Zelle. Das Aussehen des ToolTips soll nicht verändert werden, sondern lediglich seine postition so nach rechts bzw. links verschoben werden, so das er innerhalb der Tabelle bleibt.

Du weisst, dass deine Tabelle eine dynamische Breite haben wird. Also kannst du gar nicht solche Anforderngen beim Umfang der Tooltippinhalte stellen.

Wenn deine Spalten eine Standardbreite haben, so steht bei right:0px eine doppelte Spaltenbreite für deine Tooltipps zur Verfügung (in der Annahme dass Zelle A1 keinen Tooltipp erzeugt). Besseres kann ich dir nicht bieten.

Eventuell solltest du aber besser deine Romane verlinken, und sie am Fuss der Tabelle schreiben.

[marctrix]

Hej wKovacs,

Wie kann ich erreichen, das die ToolTips der äusseren Zellen, weiter nach Innen versetzt werden, damit sie nicht nach Aussen über meinen Wrapper bzw die Tabelle hinausragen? Idealerweise automatisch und nicht durch "händische" definition von left und right?

Warum nicht? last-of-type bzw nth-of-type sind doch genau dafür gedacht, solche Elemente gezielt anzusprechen.

Marc

[marctrix]

Hej wKovacs,

ich habe eine Tabelle so breit wie mein wrapper. Für jede Zelle im Header erscheint beim mouse-hover ein mit CSS-erzeugter ToolTip (ein absolut zur Zelle positioniertes span-Element). Der ToolTip erschein zentriert unterhalb der Zelle. Soweit so gut.

Gut? Auch auf Smartphones? - Damit sind schließlich die meisten Menschen unterwegs…

Marc

[wKovacs]

nth-last-of-type funktioniert gut. Auch wenn damit jede betreffende Spalte separat definiert werden muss.

Vielen Dank

Auf meinem Android-Phone siehts auch aus wie gewünscht

[marctrix]

Hej wKovacs,

nth-last-of-type funktioniert gut. Auch wenn damit jede betreffende Spalte separat definiert werden muss.

Vielen Dank

Gerne

Auf meinem Android-Phone siehts auch aus wie gewünscht

Prima. Wenn es fertig ist, schick doch mal einen Link!

Marc

[wKovacs]

hier noch wie gewünscht der Link