Absolute Positionierung in Abhängigkeit zum Seitenrand

[joschilein]

Ich habe mir eine Art Tooltip gebaut, der nur dann angezeigt wird, wenn man über den Marker (in dem Fall ein Bild) fährt.

<div class="tooltip">
  <img src="merkerbild.jpg" />
  <div class="text">Text des Tooltips</div>
</div>Text neben dem Marker

Und das zugehörige CSS (gekürzt auf das Wesentliche)

.tooltip{
  position: relative;
  float: left;
}
.tooltip .text{
  display: none;
}
.tooltip:hover .text{
  display:block;
  position: absolute;
  z-index:2;
  top: 2em;
  left: 2em;
  width: 20em;
  border: 1px solid #000000;
  background: #ff0000;
  color: #ffff00;
}

Funktioniert soweit auch wunderbar. Problem ist natürlich, dass das sichtbar werdende div dann (teilweise) nach rechts aus dem Fenster ragt, wenn der Marker schon sehr weit rechts auf der Seite positioniert ist. Mit Scrollbalken benutzen wird es wegen dem hover natürlich auch schwierig.

Gibt es eine Möglichkeit (ohne JS) dafür zu sorgen, dass der Seitenrand als Barriere dient und das div dann "nach links" oder jedenfalls maximal bis zum Seitenrand verschoben wird?

 

[kbot]

hmm, schon "right: 0px;" probiert für '.tooltip:hover .text' ?

 

[joschilein]

right:auto hatte ich mal dazu gepackt, mit 0px macht es ebenfalls keinen Unterschied. Ist aber eigentlich auch richtig, weil left + width + right gleichzeitig angeben hat irgendwie keinen Sinn.

Mir schwirrt die ganze Zeit das overflow im Kopf rum, aber das bezieht sich natürlich nur darauf, falls etwas aus dem Div über dessen Rand schauen möchte.

 

[theHacker]

Ohne jetzt ne Lösung parat zu haben, würd ich sagen

Gibt es eine Möglichkeit (ohne JS) dafür zu sorgen, dass der Seitenrand als Barriere dient und das div dann "nach links" oder jedenfalls maximal bis zum Seitenrand verschoben wird?

Ne, geht ned.

Das wäre ja ne Fallunterscheidung und sowas Tolles geht in CSS nicht (Vielleicht mit CSS3 und den Berechnungsdingern?).

 

[chris_kay]

right:auto hatte ich mal dazu gepackt, mit 0px macht es ebenfalls keinen Unterschied. Ist aber eigentlich auch richtig, weil left + width + right gleichzeitig angeben hat irgendwie keinen Sinn.

Es macht aber Sinn, das left: 2em mit right: 0px; zu ersetzen.

Dann richtet sich nämlich der .tooltip .text so aus, dass sein rechter Rand immer über dem rechten Rand des .tooltip liegt und er sich demzufolge nach links ausbreitet.

 

[joschilein]

Habe ich dann nicht irgendwie das gleiche Problem, wenn ein anderer Marker nahe dem linken Bildrand eingebunden wird?