Max en min-width probleem

[F.West98]

Ik heb een probleempje. Op mijn site heb ik een hover, die dan een popupje toont (als het ware) met daarin tekst. Kan verschillen van 2 woorden tot 100 woorden.
Wat ik wil is dat als het 2 woorden is dat hij minimaal 50px breed is. Dan maximaal met 100 woorden 250px breed en dan meerdere regels... Ik kom er nu niet uit.
Code:

HTML:

<div class="tooltip">
    <span class="tip">
         De tekst die in dit geval heeel lang is, in ieder geval meer dan 250px, hoop ik
    </span>
</div>

De nodige CSS:

Cascading Stylesheet:

.tooltip {
/* even opmaak, dit is opzich belangrijk */
 background: url(img/hw_sprite.png) 0 0 no-repeat;
 float: right;
 clear: right;
 margin-top: 36px;
 background-color: yellow;
 position: relative;
}
.tooltip .tip {
 display: block;
 min-width: 50px;
 max-width: 250px;
 position: absolute;
 white-space: break-word;
}
.tooltip .tip:after {
 position: absolute;
 display: block;
 width: 0;
 height: 0;
 content: '';
}

De :after verschijnt niet... En het woorden afbreken lukt niet. Staat altijd op 50px...

EDIT: Het is al deels gelukt. Zonder min-width en max-width wordt width, dan lukt afbreken wel, maar smaller niet.

[ Voor 18% gewijzigd door F.West98 op 08-02-2012 21:59 ]

[RobIII]

Als je nou eens begint met een minimale testcase en dan stapje voor stapje uitbouwt...

[ Voor 4% gewijzigd door RobIII op 08-02-2012 21:57 ]

[F.West98]

RobIII schreef op woensdag 08 februari 2012 @ 21:56:
Als je nou eens begint met een minimale testcase en dan stapje voor stapje uitbouwt...

oeps, hover vergeten eruit te halen, echte is nog veeeeel langer

[Wiethoofd]

RobIII, zet eens een heel kort stukje tekst in die .tip in je testcase, daar faalt ie dus want hij is nog steeds 250px breed.

[RobIII]

Wiethoofd schreef op woensdag 08 februari 2012 @ 22:05:
RobIII, zet eens een heel kort stukje tekst in die .tip in je testcase, daar faalt ie dus want hij is nog steeds 250px breed.

Euh, ik heb ook nergens gezegd dat 't de oplossing of fix is; ik zeg dat 'ie van uit een minimale testcase moet beginnen en van daar uit verder moet werken. Dit was een opzet voor hem i.t.t. de lap CSS die hij postte (en wegge-edit heeft later).


Zonder aan de HTML te komen kom je op zoiets (met liniaal ) uit.

[ Voor 4% gewijzigd door RobIII op 08-02-2012 22:17 ]

[Wiethoofd]

Laat nu het verneukeratieve zijn dat de testcase al niet klopt

De .tooltip krijgt een background-image, een width van 16x16px (al dan niet met widths en height op nul met een padding van 8px) en de .tip komt tevoorschijn met de :hover. Geef je de .tip (wel of g)een min- en max-width, dan wordt keurig elk woord op een losse regel gezet. Zet je er een white-space: nowrap op, dan heb je weer overloop buiten de max-width.

[RobIII]

Wiethoofd schreef op woensdag 08 februari 2012 @ 22:35:
Laat nu het verneukeratieve zijn dat de testcase al niet klopt

...en daar kom je vanzelf achter als je dus een minimale testcase opzet; als je stript tot op 't bot zoals ik deed ('t kon nog iets kleiner) en van daar uit terug werkt naar wat je had/wil kom je vanzelf tot de conclusie waar je in de fout gaat. En dat is de reden waarom ik 't postte.

[ Voor 5% gewijzigd door RobIII op 08-02-2012 22:37 ]

[Wiethoofd]

Ik heb de originele code geklopt, wat puur al testcase is met progressive enhancement (en dus niet de testcase is die hier staat) en krijg de min width en max width niet correct. Nieuwe en nog minimalere versie: http://jsfiddle.net/DHCSu/ Hij gaat dus fout bij de langere teksten, zet je er een nowrap op, dan gaat ie bij nog langere teksten dus weer buiten de 150px die ingesteld staat...

[RobIII]

Ik heb werkelijk geen idee wat je aan 't doen bent of probeert te bereiken. RobIII in "Max en min-width probleem" al gezien? Meer vraagt TS niet volgens mij

F.West98 schreef op woensdag 08 februari 2012 @ 21:51:
Wat ik wil is dat als het 2 woorden is dat hij minimaal 50px breed is. Dan maximaal met 100 woorden 250px breed en dan meerdere regels...

[ Voor 49% gewijzigd door RobIII op 08-02-2012 22:59 ]

[Wiethoofd]

Eerste regel van de TS + het volgende

quote: Wiethoofd

Ik heb de originele code geklopt

De tooltip testcase op JSFiddle die ik link in mijn eerdere post had eigenlijk in de TS moeten staan.

[Bosmonster]

min-width werkt prima op zichzelf. Max-width werkt alleen in combinatie met een width (zij het dat die al op auto staat, zij het dat je die zelf zet).

Bijvoorbeeld width 100% en max-width 500px;

[F.West98]

Bosmonster schreef op donderdag 09 februari 2012 @ 11:23:
min-width werkt prima op zichzelf. Max-width werkt alleen in combinatie met een width (zij het dat die al op auto staat, zij het dat je die zelf zet).

Bijvoorbeeld width 100% en max-width 500px;

http://jsfiddle.net/DHCSu/
Daar zie je dus dat with icm. max-width ook niet correct werkt, en ook hoe de uitvoering moet.
Ik ben er zelf nog niet uitgekomen

[F.West98]

Misschien een js-oplossing anders? (subtiele bump )

[Verwijderd]

De reden waarom je tooltip gaat wrappen is omdat hij geen idee heeft hoe breed hij kan zijn. Hij zit namelijk in een container die 0px breed is.

Wat je wil is de tooltip 'vrij' neerzetten met een max-width zodat hij niet het gehele scherm gaat bedekken.

Dit kan je bijvoorbeeld oplossen door een toggle te plaatsen (bijvoorbeeld een <a>) die als hover de tooltip toont:

Cascading Stylesheet:

.tooltip {
 /* maakt niet uit hoe hij gestyled is. */
}

.tip {
    display: none;
}
/* Ik gebruik de + operator om de tip aan te wijzen, ik zou JS gebruiken om oudere browsers te ondersteunen */
.tooltip:hover+.tip {
    position: absolute;
    display: inline-block;
    max-width: 200px;
    padding: 2px;
    background-color: yellow;
}

De html houd ik zo simpel mogelijk:

HTML:

<a href="#mytooltip" class="tooltip">hover me</a>
<span id="mytooltip" class="tip">
  Meer tekst die dus gaat wrappen maar maximaal tot 200px die ik met de max-width heb gezet
</span>

Deze code staat ook op: http://jsfiddle.net/4zxLb/

De positie van de tip relatief aan de <a> kan je met margin aanpassen.

Dat zou een goede basis moeten zijn voor je tooltip.

[Bosmonster]

edit: was alweer vergeten wat het originele probleem was..

Anyway: met min-width erbij is die dus ook minimaal 50px, zoals je in de TS wilde ooit

[ Voor 231% gewijzigd door Bosmonster op 23-02-2012 08:08 ]

[F.West98]

Bosmonster schreef op donderdag 23 februari 2012 @ 08:03:
edit: was alweer vergeten wat het originele probleem was..

Anyway: met min-width erbij is die dus ook minimaal 50px, zoals je in de TS wilde ooit

met min-width, houdt ie die altijd. maxwidth ook, dus ik laat het zoals het nu is, de maxwidth

[Wiethoofd]

F.West98 schreef op donderdag 23 februari 2012 @ 16:50:
met min-width, houdt ie die altijd. maxwidth ook, dus ik laat het zoals het nu is, de maxwidth

Niet als je de oplossing van Deadelus neemt. De + selector wordt pas ondersteund vanaf IE7, dus IE6 zou geen tooltip zien in dat geval

[F.West98]

Wiethoofd schreef op donderdag 23 februari 2012 @ 17:08:
[...]

Niet als je de oplossing van Deadelus neemt. De + selector wordt pas ondersteund vanaf IE7, dus IE6 zou geen tooltip zien in dat geval

IE6 ziet helemaal niets
En ombouwen, neh geen zin aan