Tooltips dienen om dingen onder
de aandacht te brengen die
wellicht over het hoofd gezien
zouden kunnen worden. Een paar
kleine lettertjes in een
schutkleur vestigen niet de
aandacht op de boodschap. Daarom
moet er voor gezorgd worden dat
als de tooltip zichtbaar wordt,
deze niet genegeerd wordt en
niet te snel uit focus gaat.
De procedure van de tooltip is de eenvoud zelve.
Voeg deze CSS-code toe aan de pagina of aan een
bestaande css-file, en gebruik deze regel code
in de body op de plaats waar je de tip wilt hebben.
Als voorbeeld:
deze linkKlik
om de pagina
« BLAUW te maken
Als je deze .png files wilt gebruiken dan zijn ze beschikbaar.
De .png`s rood, groen,
blauw, geel, oranje,
paars,
turkoois en zwart kan je selecteren en opslaan.
Het is verstandig om niet al te grote files te gebruiken.
Het voorbeeld hierboven geeft problemen op computers met
een langzame verbinding.
Beter is het om links als dezeKlik
om de pagina
« ZWART
te maken
te hebben: de .png-files zijn ongeveer 10Kb en dat
werkt een stuk vlotter.
De betreffende .png files kan je hieronder vinden.
De .png`s -rood, -groen,
-blauw, -geel, -oranje,
-paars,
-turkoois en -zwart kan je selecteren en opslaan.
De pure CSS-oplossing is om GEEN graphics te gebruiken.
Er is geen enkele vertraging van de pagina en de boodschap
komt net zo goed over als bij bovenstaande voorbeelden.
Het is maar wat jouw voorkeur heeft: Mooi of razendsnel.
Tip:
Zonder enig snelheidsverlies kan je bij een zuivere CSS tooltip al reeds op de pagina gebruikte
graphics als achtergrond gebruiken Zoals de laatste voorbeeld-link hieronder. Die gebruikt de achtergrond .png van de drie kolommen.
Alle CSS code van de drie voorbeelden zijn in deze file beschikbaar.
Het laatste tooltip-voorbeeld
is hier te vinden.Klik
om de pagina
« GROEN
te maken
De titel van deze pagina is: 'CSS tooltips'.
De sleutelwoorden zijn : css en tooltips.
De omschrijving is: 'Een CSS tooltip moet snel, mooi en functioneel zijn'.
