Tooltip-Breite dem Inhalt anpassen
Hallo zusammen,
ich sitze seit gestern Abend an folgendem Problem und finde dafür einfach keine Lösung, die mich zufrieden stellt: Ich habe einen Tooltip, der verschieden lange Inhalte annehmen kann. Der Tooltip soll sich in seiner Breite dem Inhalt anpassen, jedoch nur bis zu einer Maximalbreite von 350 Pixeln. Dem Tooltip einfach „max-width: 350px;“ zuzuordnen, löst mein Problem leider nicht. Und „min-width“ möchte ich nicht benutzen, denn dann ist der Tooltip eventuell länger, als sein Inhalt. Hier mein aufs Wesentliche zusammengefasstes HTML-Markup + CSS-Angaben: HTML-Code:
<!DOCTYPE HTML> Viele Grüße |
Im Moment werden die Tooltipps nicht breiter, weil die Links als Containing Block nur eine geringe Breite vorgeben. Das ändert sich z.B., wenn man die Links auf display:block setzt.
Werden die Links denn wirklich inline sein? Und das ganze Ding nur 500px breit? |
Ich habe es gerade mit display: table für .tooltip-wrapper versucht, dann den Text nach dem <strong> in ein <em> gepackt, diesem <em> display:block und max-width gegeben.
@*pi, kannst du bitte bei solchen Fragen einen Link auf deine Beispielseite liefern, statt nur Code? |
Zitat:
Mir würde bei dieser Konstruktion gerade nur einfallen, in span.tooltip ein weiteres Element hineinzuschachteln; beide werden absolut positioniert, der äußere hat die gewünschten 350px als Breite, der innere darf shrinken. |
@Corina: Vielen Dank für deine Antwort. Die CSS-Angaben für den div#page habe nur schnell vergeben, damit die Links in dem Beispiel möglichst horizontal mittig sitzen. Im Nachhinein betrachtet, hätte wahrscheinlich auch ein einfaches "text-align: center;" gereicht;).
@Ingo: Vielen Dank für deinen Input. Ich habe eine Beispielseite online gestellt, die ziemlich genau den späteren Zustand zeigt: Tooltip Beipsiel. Die Links sollen später in einer 200 Pixel breiten Spalte nebeneinander aufgelistet werden. Insofern fällt "display: block;" für die Links m. E. weg und "display: inline-block;" lässt die Links leider sehr unschön umbrechen. |
@Corina: stimmt. Fx mag das nicht, was in Chrome funktionierte. Irgendeiner mag die Weite in Tabellen immer nicht.
Übrigens hatte ich mich vertippt. ich meinte, dem .tooltip display:table zu geben. |
falls das nun verwirrend war, sorry. Hier das Beispiel für Chrome (nicht Fx).
Code:
|
Zitat:
|
Zitat:
Doch auch so bin ich irritiert: Warum zeigt Chrome ein anderes shrink-to-fit-Verhalten, wenn das Element zur abs. Positionierung noch display:table dazubekommt? Das ist mir gerade zu hoch. Erstmal was essen ... |
ah. CSS3 zur Rettung. Für Firefox dürfen wir uns hier über Folgendes freuen:
Code:
.tooltip-wrapper:hover .tooltip { |
Alle Zeitangaben in WEZ +2. Es ist jetzt 22:49 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023