Breite der box auf Textlänge begrenzen

[pudem]

Hallo,
ich habe ein kleines Problem und komme nicht weiter.
In einem Tooltip gebe ich Text aus. Damit die Box nicht zu breit wird, habe ich den automatischen Zeilenumbruch auf normal (white-space: normal):

Das ist natürlich viel zu schmal. Da liegt es nahe, eine Mindesbreite zu definieren (min-width:300px). Das sieht dann schon besser aus:

Das Problem ist nun, dass der Text auch wesentlich kürzer sein kann:

In diesem Fall sollte die Breite der Box auf die Textlänge verkürzt werden. Geht das irgendwie mit CSS? Ich hab schon mit flexbox rumprobiert, komme aber nicht weiter

Hier der Vollständigkeit halber mal das entsprechende CSS:

.csstooltip .csstooltiptext {
min-width:300px;
white-space: normal;
bottom: 100%;
visibility: hidden;
line-height:22px;
color:black;
background:white;
border:1px solid black;
padding:10px;
border-radius:15px 15px 15px 0px;
position: absolute;
z-index: 1;
left: 0%;
margin-left: 10px;
opacity: 0;
transition: all 0.7s ease-in-out;
}

 

[basti1012]

mach doch zb so

.csstooltip .csstooltiptext {
width:auto;
  min-width:100px;
  max-width:300px;
white-space: normal;
bottom: 100%;
visibility: hidden;
line-height:22px;
color:black;
background:white;
border:1px solid black;
padding:10px;
border-radius:15px 15px 15px 0px;
position: absolute;
z-index: 1;
left: 0%;
margin-left: 10px;
opacity: 0;
transition: all 0.7s ease-in-out;
}

 

[pudem]

Danke, aber das hilft nicht viel weiter.
min-width führt dazu, dass es bei längeren Texten zu schmal wird und kurzen Texten zu breit. Wegen white-space: normal wird bei längeren Texten nicht die volle mögliche Breite (max-width) ausgenutzt (erstes Bild). Irgendwie müsste man white-space dazu bewegen, die volle mögliche Breite zu füllen und erst dann einen Zeilenumbruch vorzunehmen.

Ich hab schon überlegt, auf white-space zu verzichten und den Text mit PHP zu untersuchen und ggf. ab einer bestimmten Länge <br> -Tags einzubauen, aber da gibts bestimmt was Eleganteres...

 

[basti1012]

hast du alles gelsen ?

width:auto;
  min-width:100px;
  max-width:300px;

Habe das getestet und er ist immer so gross wie der text.
Du kannst ja min-with weg lassen und nur maxc und width:auto nehmen dann passt der container sich der breite an?
Zumindest bei codepen
Und dran denken wenn ein Wort grösser ist als 300px dann läuft er über den Container weiter.
Dafür gibt es noch word-wrap:break-word;' der trennt das word dann am Container ende

 

[pudem]

Danke, Ihr habt recht. Sehr seltsam!
Aber ich komme der Sache langsam näher. Ist mal wieder etwas komplizierter. Habs auch mal nachgebildet:

https://jsfiddle.net/pudem/rarezgrd/14/

Man muss mit der Maus über "A" und "B" fahren.
Das Problem liegt wohl am übergeordneten div. Das enthält "display: inline-block;", damit A und B nebeneinander stehen. Wenn ich das rausnehme, dann werden die Tooltips richtig dargestellt, dann wiederum stehen A und B untereinander, was sie nicht sollen....
Habs auch mit "float:left" probiert, macht aber keinen Unterschied....

 

[pudem]

Das ist genial, vielen Dank! Da ich mit JS auf Kriegsfuß stehe, hätte ich das so nie hingekriegt.

edit:
Auf folgender Seite ist das Problem beschrieben worden und bietet eine CSS-Kompromisslösung an, die allerdings nicht ganz überzeugend ist in meinen Augen (ziemlich weit unten). Wen es interessiert: http://hypertext-talk.de/skins/revilo_style/post_assets/css_tooltips/index.html