Tooltips ... en de combinatie met :before {content:url(..);}

Status
Niet open voor verdere reacties.
J

janyep

Gebruiker
Lid geworden
7 mei 2008
Berichten
261
Goedenavond dames en heren,

Hopelijk weet iemand raad? Zou er blij mee zijn!

Er is sprake van tooltips
( .../test.html onder het kopje Tooltip Testen )
Code: 
/* .tooltip bron: http://www.vision.to/articles/auto-positioning-for-absolute-elements.php */
.tooltip                          { cursor:help; } /* dus geen help voor .tooltip a */
.tooltip a:after                { content:none !important; } /* = uitsluiting #box_tekst a:after  |  zie 8. Selectors voor box_tekst */
		 
.tooltip span                   { position:absolute; left:-9999em; background:#f4f4f4; color:#046cb8; padding:2em .45em; text-decoration:none; display:block; min-width:400px; z-index:100; }
.tooltip:hover span           { left:auto; } 
.tooltip:hover span:before { content:url(../plaatjes-signs/drop-right-orange.png)'\a0'; } /* \a0 = spatie */

Er is sprake van icoontjes die gehoverd kunnen worden waarna de tooltip verschijnt.
Op deze icoontjes wordt :before {content:url(..);} toegepast
Dit dus i.p.v. <img src="plaatjes-signs/info.gif" width="12" height="11" alt="" />
Code: 
.before_info:before       { content:url(../plaatjes-signs/info.gif)'\a0''\a0'; } /* \a0 = spatie */

gecombineerd met een hyperlink werken de tooltips in alle browsers = OK
Stand-alone werken ze in IE, Firefox, Opera = OK.
Maar niet in Google, Safari, Maxthon: de icoontjes zijn zichtbaar maar de hover is niet meer actief.

Heeft iemand enig idee?
Dank, met vriendelijke groet, janyep
 
Hoi janyep,
Ik volg even de 2x 3 voorbeelden van je testpagina onzeautovakantiesinnoorwegen.nl/TEST/max-width%20800px/sor-trondelag.html (onder het kopje Tooltip Testen):

Eerste serie:
  1. Heeft een tekst-link (met oppervlak), waarover gehoverd kan worden > OK.
  2. Heeft in de link een img (met oppervlak), waarover gehoverd kan worden > OK.
  3. Heeft een lege link, maar dankzij de padding van de <a> (L & R .45em) *) wel een oppervlak, waarover gehoverd kan worden > OK.

Tweede serie
  1. Heeft geen link, maar wel een img (met oppervlak), waarover gehoverd kan worden > OK.
  2. Heeft inwendig alleen maar de <span> van de tooltip (die met absolute positie uitgerangeerd is), en is dus volledig leeg in de html. > ?
  3. Heeft inwendig een lege <b> en ook de <span> van de tooltip die niet meedoet, en is dus ook volledig leeg in de html. > ?

Nu de browser-reacties op de laatste twee:
  • Aha, zeggen Google, Safari, Maxthon: een lege span in de html? Dan is er geen oppervlak waarover gehoverd kan worden! > en dus géén tooltip.
  • Hoho, zeggen IE, Firefox, Opera: misschien wel een lege span, maar het oppervlak van de .before_info:before telt ook mee! > dus een hoverbaar oppervlak en een tooltip.

Wie van de dames en heren gelijk heeft, kan ik niet met zekerheid zeggen (de CSS-specs niet op nageslagen, misschien laten ze de interpretatie van een :before-image aan de browsers over).

Maar je bent denk ik uit de brand met een gewoon background-image:
HTML: 
<span class="info">
	<span>Het tooltip-gebeuren</span>
</span>
En dan als hoofdingrediënt:
Code: 
span.info {
	margin: 0 5px; /* nooit pal naast elkaar */
	padding: 2px 2px 2px 20px; /* 2px top/bottom voor wat meer hover-oppervlak; L 20px voor vrijhouden evt. tekst erna */
	background: url(plaatjes-signs/info.gif) 5px 50% no-repeat; 
	/* 5px vanaf links ivm padding, verticaal gecentreerd op de regel */
	}
span.info span {
	left:-9999em;
	... en de rest, als boven
	}
span.info:hover span {
	left: auto;
	}

janyep-bgimg.png

Op deze manier kan je binnen de <span class="info"> ook nog een link of zo plaatsen.
HTML: 
<span class="info">Een link of zo
	<span>Het tooltip-gebeuren</span>
</span>

Met vriendelijke groet,
CSShunter
_____________
*) De css-enlargedLink voor betere gebruiksvriendelijkheid en toegankelijkheid! :)
 
Laatst bewerkt:
Goedenavond csshunter,

het is weer helemaal geweldig: het werkt prima: alle browsers zijn tevreden !
.../test.html

een beetje geknutseld

Code: 
span.info span 
{ left:-9999em; [COLOR="#0000FF"] position:absolute; display:block;  z-index:100; /* IE7 heeft z-index nodig */[/COLOR]
  ... en de rest, als boven }

Code: 
background: url(../plaatjes-signs/info.gif) 0 50% no-repeat;  [COLOR="#0000FF"]/* ipv links 5px geeft 0px een rechte uitlijning verticaal */[/COLOR]

Code: 
<span class="info">[COLOR="#0000FF"]&nbsp; <!-- alleen een icoontje: dan hebben Google, Safari en Maxthon een spatie nodig bij tooltip -->[/COLOR]
    <span>Het tooltip-gebeuren</span>
</span>



Heb gedacht dat 'ie zo def. zou moeten kunnen ?
Suggesties blijven altijd welkom, maar je hebt wel weer al genoeg gedaan!
Heel hartelijk dank,


Code: 
/* .tooltip2 bron: http://www.helpmij.nl/forum/showthread.php/733535-Tooltips-en-de-combinatie-met-before-content-url%28-%29?p=4706657&viewfull=1#post4706657 */
[COLOR="#FF0000"].tooltip2[/COLOR]
{ cursor:help;
   padding:1em; /* dit bepaalt de hover-oppervlak en tevens de afstand tussen 2 tooltips die naast elkaar staan */ }

[COLOR="#FF0000"].tooltip2  span[/COLOR]
{ left:-9999em;
   position:absolute; display:block;  z-index:100; /* IE7 heeft z-index nodig */
   background:#f4f4f4; color:#046cb8; width:100%; }

[COLOR="#FF0000"].tooltip2:hover span[/COLOR]
{ left:auto; padding.45em; /* padding-top 2.5em geeft ruimte voor title=" " onder hyperlinks | alternatief = :before met line-break <br /> */ }

[COLOR="#FF0000"].tooltip2:hover span:before[/COLOR]
{ content:url(../plaatjes-signs/drop-down-orange.png)'\A'; white-space:pre;  
   /* '\A'; white-space: pre; = line-break | bron: http://onwebdev.blogspot.com/2011/01/html5-line-breaks-and-css-generated.html */ }		 
		 
[COLOR="#FF0000"].bg_info[/COLOR]   { background: url(../plaatjes-signs/info.gif) 0 50% no-repeat; }		 
[COLOR="#FF0000"].bg_audio[/COLOR] { background: url(../plaatjes-signs/audio.png) 0 50% no-repeat; }

HTML: 
<span class="tooltip2 bg_info">&nbsp; <!-- alleen een icoontje: dan hebben Google, Safari en Maxthon een spatie nodig bij tooltip -->
   <span>Tooltip-tekst</span>
</span>


<span class="tooltip2 bg_info"><a href="#" target="_blank" title="test.html  |  een link of zo">Een link of zo</a>
   <span>Tooltip-tekst bij een link of zooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</span>
</span>


<span class="tooltip2 bg_audio">?
   <span>Tooltip-tekst audio</span>
</span>

<br />De volgende tekstregel even testen ...


:thumb: De css-enlargedLink .... in .../css/style.css
/* 3. Basic HTML ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
a:link, a:visited, a:hover { padding:0 .45em; position:relative; z-index:1; }
/* larger link-area | bron: http://home.tiscali.nl/developerscorner/css-enlargedLink/large_link-area.htm */
Klik om te vergroten...

Nogmaals dank, met vriendelijke groet janyep
 
Laatst bewerkt:
Hoi janyep,
Hoei, dat was even een narrow escape! :D
Zit ik vanmiddag nog wat te knutselen aan de tooltips, met jouw stylesheets aangehangen aan m'n testpagina, zijn opeens op onverklaarbare manier de styles van jouw voorbeeld van hierboven veranderd. Wat had ik fout gedaan? CSS-validator vond alles o.k., dus ik had geen tikfoutje ergens tussendoor gemaakt.
Ah, toch niet onverklaarbaar! Blijk jij ook niet stil te zitten en de namen van de tooltip-classes in het stylesheet veranderd te hebben. Oef, ombouwen van m'n testpagina had ik nu ook weer geen geweldige zin in... Maar gelukkig had ik de vreselijke mazzel dat ik nog de originele versie in de browser had openstaan.
Die vlug gekopieerd en aangehangen: nu zat alles weer snor. :)

Terzake!
  • Door de voor Chrome, Safari en Maxthon nodige &nbsp; komt er noodgewongen een blokje niet weg te werken ruimte aan de rechterkant van het i-icoontje. Dat maakt het voor de bezoeker lastig om te zien op welke i hij/zij zit.
    Van rechts naar links hoverend: zodra je de linkerkant van het icoontje gepasseerd bent, zit je al in de tooltip van de vorige. En omgekeerd, er zit geen pixel tussenruimte, en de switch zit niet op de helft tussen de twee icoontjes.

  • Om te beginnen voor de duidelijkheid een hover-variant van de icoontjes gemaakt. Die zitten samen in deze css-sprite, dat scheelt weer 3 vertragende http-requests. De bezoeker weet niet dat er een pracht van een hover-area om de icoontjes zit, en daarom voor het psycholigisch effect ("Moet ik met de muis op zó'n klein icoontje klikken?") de icoontjes een slagje groter gemaakt.

  • Als doende kwam ik er achter dat er niet een ruimteslurpende &nbsp; nodig is, als je in plaats daarvan een element in de html opneemt dat een breedte heeft en een inline-block karakter. Met een negatieve margin-left kan dit (onzichtbaar) naar links verplaatst worden, zodat geen breedte wordt ingenomen: toch blijven Chrome en Safari het doen!!!
    Voor het element heb ik een lege <i></i> genomen, dat is lekker kort.

  • Met flink wat schoffelen met margins en paddings is nu de tooltip-wissel naar precies in het midden verhuisd.

  • In jouw versie is het vrij lastig om weer van de tooltips af te komen; daarom aan de tooltips zelf een anti-hover stijl gekoppeld.

  • Dan blijkt er bij sommige browsers een donker vlekje te zitten in de linkerhoek van het tooltip-kadertje. Dat is het linkerbovenhoekje van de D van "De volgende regel" die er doorheen piept!

    piep-D.png

    Eerst proberen op te lossen door de <br /> met wat extra styles op te tuigen. Prima resultaat in Firefox, helaas niet in Chrome. Maar ja, <br />'s zijn er ook niet voor bedoeld om een hoogte, padding, margin of block-karakter te krijgen!
    Wat wel gaat: de <span>'s van de icoontjes een inline-block geven, dan werkt de padding-bottom door voor de volgende regel.

  • De tooltip-blokjes liepen aan de rechterkant door tot voorbij de regeleinden van de gewone regels (en de scheidingslijntjes daartussen), veroorzaakt door de {width: 100%;}. Door die te vervangen door een {right: 0;} komt dat in orde.

  • IE7 doet bij jouw versie alsof de <br /> niet bestaat, en gaat met de tooltip vrolijk in de resterende ruimte naast de icoon-<span>'s staan ipv er onder.
    In mijn versie pakt IE7 met de tooltips wel de volle breedte, maar gaat evenmin naar beneden en maakt de icoontjes-regel volledig onzichtbaar. Opgelost met een conditional comment en speciale IE7-instructies (hoe IE8 en IE9 het ervan afbrengen moet nog getest worden).

  • Een ambachtelijke help-cursor gefabriekt (deze mini-help-cursor.png), die wat kleiner is dan het origineel en beter in verhouding staat met de icoontjes. Eventueel kan de hele help-cursor weggelaten worden: die geeft geen extra info, en door het verschijnen van het hover-icoontje en de tooltip zal duidelijk zijn wat er gebeurt als je op een icoontje gaat staan.

O ja, hier istie ;): avnoorwegen-tooltips.htm
De bovenste is jouw versie zoals in je codes hierboven, de onderste is mijn voortborduursel.
Firefox, Chrome, Opera, Safari en IE7 zijn bij mij tevreden.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Goedenavond csshunter
Oh zech, wat is 'ie mooi! De details van de professional, nietwaar?

Blijk jij ook niet stil te zitten en de namen van de tooltip-classes in het stylesheet veranderd te hebben.
Klik om te vergroten...
:cool:en ik maar denken dat 'ie af was ...

Het kwartje wil nog niet vallen waarom het niet lukt de tooltip zelf een link te geven.
Komt dat soms doordat het icoontje op een background staat? En dan kan dat helemaal niet hé, nietwaar?
HTML: 
<span class="tooltip3 bg_info3"><a href="#" target="_blank"></a>
  span>Tooltip-tekst</span>
</span>



IE-hack lijkt alleen nodig voor IE7
<!-- IE-hack voor tooltips: -->
<!--[if IE 7]>
<style type="text/css">
.tip span {z-index:100;}
.tooltip3 span {margin-top: 1.8em; width: 682px; z-index:100;}
</style>
<![endif]-->
Klik om te vergroten...

(hoe IE8 en IE9 het ervan afbrengen moet nog getest worden).
Klik om te vergroten...
In IE9 gebruik ik met F12 een werkbalk met browserkeuze (IE7, IE8, IE9).
Is bruikbaar, werkt redelijk: het vreemde doet zich wel voor dat een pagina er offline soms toch nog anders
uitziet dan online
(in mijn geval gaat dat om de linkerkantlijn van de tekst, die heeft offline geen border 1px.
zal ergens de margin zijn maar ga het niet uitzoeken: tegen de tijd dat deze website af is, zijn IE7 en IE8 wellicht al aardig verleden tijd :cool:

Heel hartelijk dank,
groeten janyep
...TEST.html
 
Laatst bewerkt:
Hoi janyep,
Hij was dus toch nog eventjes under construction, ook met de icoontjes in de list-items van je laatste test. ;)

listitem-tooltips.png


  • Ja, de icoontjes staan te laag - of de regels staan te hoog: 't is maar hoe je het bekijkt. :d
Wat hier namelijk parten speelt is de line-height, die voor de <p>'s anders is dan voor de <li>'s. De plaatsbepaling van de icoontjes is in een afstand vanaf de bovenkant van het kadertje, om mooi mee te lopen met vergroting van het letterformaat. Als door een andere line-height de positie van de regel t.o.v. de ovenkant verandert ...



Zet je de line-height van een <p> op de normale standaard hoogte, dan gaat het in een <p> precies zo mis als bij de <li>.
Voor de <li>'s kan het op twee manieren opgelost worden: ofwel de line-height gelijk maken aan die van de <p>'s, ofwel een aangepaste background-positie op de icoontjes loslaten.



=======
Nog te doen: de tooltip zelf een link geven
Klik om te vergroten...
Het kwartje wil nog niet vallen waarom het niet lukt de tooltip zelf een link te geven.
Komt dat soms doordat het icoontje op een background staat? En dan kan dat helemaal niet hé, nietwaar?
Klik om te vergroten...
Nee, dat is het niet; tenminste ik bedoelde wat anders.


  • Is aanschouwelijk gemaakt (+ oplossing) in de laatste twee tooltips van nummertje 3. :)

=======
Het vreemde doet zich wel voor dat een pagina er offline soms toch nog anders uitziet dan online.
Klik om te vergroten...
Het blijft altijd een beetje behelpen met die ingebouwde browsers. Tegen een test in de puur natuur online wereld kan niets op!

=======
... tegen de tijd dat deze website af is, zijn IE7 en IE8 wellicht al aardig verleden tijd :cool:
Klik om te vergroten...
IE-hack lijkt alleen nodig voor IE7
Klik om te vergroten...
Ja, IE7 is nu al zo goed als afgeschreven (nog maar 1% van de NL surfers gebruikt 'm).
IE8 hangt er denk ik een beetje van af: Windows XP-gebruikers kunnen geen IE9 op hun kast zetten, die werkt er niet op. En er zijn nog een heleboel tevreden XP-gebruikers (zoals ondergetekende), die er niet over peinzen om een nieuw Operating System te gaan kopen alleen om de nieuwste browser-versie te kunnen gebruiken.
De nieuwste Firefox, Chrome, Opera en Safari kunnen toch ook gewoon op XP, dus waarom IE9 niet?
Koppelverkoop, noemen ze dat... :mad:
Dat komt anders te liggen als de Microsoft-ondersteuning (incl. beveiligings-updates) voor XP ophoudt, dan zullen XP'ers wel overschakelen op Windows7 of Windows8. Dat komt er volgens MS aan in augustus 2014. Maar de lifetime van XP is al een paar keer verlengd, dus wie weet.
Kortom, hoe minder haast je met de site maakt, hoe beter het zal gaan met IE. ;)

Met vriendelijke groet,
CSShunter
 
Hallo csshunter,

Hier dan toch.
Sorry, helpmij.nl was tussen 6 nov. en 8 nov. niet bereikbaar? Kon je reactie niet eerder lezen. Dat noopte weliswaar tot zelfstudie, maar of dit ooit zo netjes gelukt was?

Het ziet er heel gaaf uit op ...//avnoorwegen-tooltips-3.htm,
mooi hoe de css in elkaar zit,
en precies wat ik zocht.
Dit sjabloon gaat niet in het archief maar bij wijze van in de kluis!

Code: 
De .tooltip3 span padding-bottom toch teruggebracht van 8 px naar 1px 10px 1px 35px; omdat de regelhoogtes enigszins werden aangetast

| als gevolg daarvan .tooltip3 span padding-top: .45em verhoogt naar .8em  =  meer ruimte voor title=" " onder hyperlinks */


Csshunter, mag ik nog vragen waarom de sprite zo mega-breed is - voor maar voorlopig 4 plaatjes ?
Is dat zo maar, of is ook daar :thumb: over nagedacht?


"Kon je reactie niet eerder lezen."
En ook mijn dank niet eerder overbrengen.
Maar het is andermaal buitengewoon geweldig. Dank voor alle moeite

vriendelijke groet, janyep
...TEST.html
 
Laatst bewerkt:
Hoi janyep,
mag ik nog vragen waarom de sprite zo mega-breed is?
Is dat zo maar, of is ook daar over nagedacht?
Klik om te vergroten...
Ja, daar is zelfs 2 keer over nagedacht. ;)

  1. Oorspronkelijk wilde ik de tooltip-icoontjes verticaal centreren binnen de regels. Dat staan ze ook in de sprite, maar omdat de <span>'s waar ze in zetten geen vaste breedte kunnen hebben en er horizontaal niet de volgende zichtbaar mag worden, moet er voldoende afstand tussen zitten (= de max. regelbreedte, voor alle veiligheid op ca. 1200px gezet).
  2. In tweede instantie heb ik de icoontjes toch niet verticaal gecentreerd: afregeling van de top-hoogte gaat beter met een flexibele bg-top-afstand (van .45em), waarmee tegelijkertijd vermeden wordt dat de icoontjes halverwege twee regels komen te staan als de bijgaande tekst of link onverhoopt méér dan 1 regel hoog zou worden (zie ook hier).
    Daarmee vervalt de noodzaak om de icoontjes verticaal te centreren + een grote tussenafstand, en kunnen ze in principe ook onder elkaar geplaatst worden (met ook enige afstand, zodat de volgende verticaal niet zichtbaar wordt bij meerdere regels e.d.). Maar omdat de top-afstand niet in vaste px is, zal het onmogelijk zijn om die te bepalen (zou eigenlijk een combi moeten zijn van de vaste px-afstand in de sprite + de em-afstand voor de top, en dat gaat niet). Dus ik besloot de sprite maar zo te laten.
En de 806 bytes van de sprite geven ook geen dwingende reden om het anders aan te pakken. :d

Met vriendelijke groet,
CSShunter
________
PS: Ja, helpmij is af en toe onbereikbaar geweest. Maar een reactie hoeft voor mij niet per kerende post, dus niets a/d hand. :)
 
Laatst bewerkt:
Hallo csshunter
wederom prima uitgelegd :thumb:
klinkt logisch !

hiermee lijkt dit item helemaal rond/compleet.
Héél hartelijk dank voor zoveel moeite

vriendelijke groet van janyep
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan