Pure CSS Tooltips
Veröffentlicht am: 08.06.2011 @ 02:56:00
Tooltips wirklich nur mit CSS
Viel kann man im Internet lesen über Tooltips die nur mit CSS realisiert werden.
Vielen der Beschreibungen und Ideen fehlt jedoch eine Tiefenbetrachtung und es wird oft auch nicht auf Browser-Kompatibilität geachtet.
So wird z.B. der stacking-context nicht erklärt und bei sich überlagernden Tooltips kommt es somit zu Problemen (insbes. in IE7).
Auch gibt es ein Problem bei erzwungenen Zeilenumbrüchen in IE7 das geklärt und gelöst werden muß und kann.
Hier wurde versucht eine mehr oder weniger umfangreiche Dokumentation zu erstellen, deren Ergebnis sich auf einer XHTML-Seite wiederfindet.
Einen kleinen Vorgeschmack bekommen Sie wenn Sie mit Ihrer Maus auf den Link zu dieser Abhandlung gehen:
CSS Tooltips erklärt interner Link, öffnet sich in diesem Tab oder Fenster
Tooltips sind beliebt um kleine Zusatzinformationen an den Besucher einer Internetseite zu geben, sei es eine Begriffserklärung oder eine Erklärung zu einem Link.
v
Leider funktionieren viele der auf Webseiten zu findenden Tooltip-Funktionen nur mit Javascript und es soll ja noch Menschen geben, die Javascript in ihrem Browser deaktivieren.
Dafür sind die reinen CSS-Tooltips, welche, im Gegensatz zu den von vielen im Internet von uns gefundenen, wirklich reine CSS Tooltips sind, ohne Tricks und doppelte Boden.
Und:
Sie sind äusserst flexibel, überzeugen Sie sich:
Wirklich reine CSS Tooltips erklärt interner Link, öffnet sich in diesem Tab oder Fenster
Viel Freude beim Lesen.
PermalinkTrackback-Adresse für diesen Eintrag
Kommentar-Feed für diesen Eintrag7 Kommentare
Kommentar von: Ledergolf
Grüße
freut mich, daß meine bescheidene Ausarbeitung jemandem helfen konnte.
noRiddle
Selbst als "Fortgeschrittener" lernt man nie aus: Die Ausrichtung des Tooltips an %-Werten festzumachen war für mich neu!
Das hat mich gleich veranlasst ein wenig rumzuspielen und ein paar Klassen aufzumachen:
.dfn_tip span {
position: absolute;
}
/*normale Ausrichtung*/
.dfn_tip:hover span {
width: 260px;
left: 110%; bottom: 0;
}
/*Ausrichtung nach links */
.dfn_tip_L:hover span {
left: auto; right: 110%;
}
/*Ausrichtung top mitte */
.dfn_tip_T:hover span {
left:-130px; right:-130px; bottom: 130%;
}
/*Ausrichtung bottom mitte */
.dfn_tip_B:hover span {
left:-130px; right:-130px; bottom: auto; top: 130%;
}
Damit kann ich nun sehr zuverlässig auch im IE das Tooltip nach allen Seiten ausrichten, ich muß nur jeweils die 2. Klasse anhängen.
Kleiner Tip noch für den IE7: um seine teilweise unberechenbaren Befindlichkeiten zu zügeln, gebe ich ihm sehr oft die Klasse "zoomfix".
.zoomfix {zoom 1;}
Hilft in den meisten Fällen bei hasLayout.
Gruß Werner
Ja, sich selbst ein paar Klassen zu definieren die man immer wieder benutzen kann ist sehr hilfreich.
Was IE7 betrifft:
Klar zoom:1; ist gut um hasLayout zu triggern, mich stört allerdings, daß es nicht validiert.
Kann man natürlich in ein IE7 Stylesheet in Conditional Comments packen,
ich versuche es aber zu vermeiden wenn es geht.
Grüsse,
noRiddle
P.S.
Mit deiner / eurer hier angegebenen Internetseite habt ihr euch ja echt Mühe gegeben, schick...
Grüße Werner
