In diesem Tutorial geht es um Tooltips, vor allem um ihre Konstruktion, die auf den CSS-Eigenschaften position,
visibility und der Pseudoklasse :hover beruht. Die Tooltips kommen ohne JavaScript aus und  funktionieren in
IE und FF, manchmal allerdings nicht z.B. im Opera. Es gibt zwar Workarounds für alle möglichen Browser und
Versionen, diese beinhalten aber eine Reihe teils absurd erscheinender Kunstgriffe.

Auf so etwas lassen wir uns hier nicht ein - abgesehen vom IE, an dem man faktisch nicht vorbeikommt. Wer weiß
denn schon, welche Tricks uns dann wieder die nächste Version abverlangt. Stattdessen stelle ich hier ein paar
CSS-Grundlagen vor -besonders position- und dann eine Tooltip-Basisversion, sozusagen als Startpunkt für eigene  
Versuche.



In beiden Tooltip-Versionen, die oben im Bild zu sehen sind, besteht der HTML-Teil eines Tooltips aus einem
Link von der Klasse "tooltip", darin ein span mit dem Info-Text; das sieht z.B. so aus:

Code:

Für den IE ist wichtig, dass es sich um einen normalen Hyperlink mit gesetztem href-Attribut handelt.
Ein einfacher Anker reicht nicht.

Tooltips haben zwei wesentliche Eigenschaften: sie wechseln zwischen sichtbar und nicht sichtbar und sie
haben eine bestimmte Position, z.B. etwas unterhalb des erklärten Begriffs. Für beides gibt es CSS-Eigenschaften,
nämlich visibility und position.

• Der Normalfall ist position: static. Ein so positioniertes Element fließt im Text mit (Inlineelement) bzw.
  bildet einen Absatz (Blockelement). top/left-Angaben sind wirkungslos.


• Ein Element mit position: relative wird gemäß top/left-Angabe relativ zu seiner 'normalen' (static) Position
  verschoben. Nachbarelemente tun so, als säße das Element an seiner normalen Position.


• Bei position: absolute bezieht sich top/left nicht auf die static Position, sondern auf die obere linke Ecke
  des (im Elementbaum) nächsthöheren nicht-static-Elements. Nachbarelemente tun so, als gäbe es
  das Element gar nicht; es ist völlig aus dem Textfluß herausgenommen.

In folgenden Bildern ist der Bezugspunkt rot markiert, die umgebende Box hat jeweils "position: relative":



Wir wollen nun, dass der Info-span im Tooltip-Link etwas unterhalb des Links positioniert wird. Der span wird
dazu aus dem Textfluss herausgenommen (abs.), auch damit er andere Elemente nicht verdrängt. Bezugspunkt
für die top/left-Angabe des span soll dann der Link sein, deswegen setzen wir bei ihm "position:relative":






Mit der CSS-'Pseudoklasse' :hover können wir Styleregeln aufstellen, die nur gelten, wenn die Maus sich über
dem Element befindet (IE6: nur <a>). Wir nutzen das und definieren die Sichtbarkeit des Tooltips zweimal:
einmal für den "Normalzustand" (hidden) und einmal für den hover-Zustand (visible). - Alles zusammen:

Code:


Der IE muss bei diesem Manöver angeschubst werden. Nur wenn sich bei :hover etwas Wesentliches im Link tut,
kümmert er sich auch wie gewünscht um dessen Innereien. Deswegen setzen wir background: transparent, ein
ansonsten sinnloser Schritt, transparent ist ja schon die Voreinstellung. - Immerhin: andere Farben gehen auch ;o)
Auch wichtig: "position: relative" sollte erst im :hover-Fall gesetzt werden, nicht schon vorher. Im IE liegen sonst
spätere Tooltip-Links über früheren.


Diese "Grundform" ist natürlich noch reichlich blass - ergänzen wir also die CSS-Regeln. Das Ergebnis sieht
dann in IE6 und FF2 so aus wie im Bild ganz oben, rechte Seite. Im Opera werden die Tooltips innerhalb von
größeren textgefüllten Rechteckbereichen meist dargestellt, am Rand aber oft nur teilweise. Das Ergebnis ist
nicht vorhersehbar (oder doch?). - Die Formatierung geht natürlich noch schöner, bunter, ... z.B. auch mit
Hintergrundbild im Tooltip ... :

Code:




Ganz ähnlich funktioniert das Beispiel im Bild ganz oben, linke Seite: In einem umgebenden Div (zur Demonstration
hier mit Rahmen) sind 4 Link-Buttons angeordnet. Damit sie untereinander und nicht nebeneinander erscheinen,
wählen wir die Anzeigeart "display:block". Die Links selbst sind diesmal "static" positioniert, das nächsthöhere
nicht-static-Element ist somit das Rahmendiv #navi; an ihm orientieren sich also hier die Tooltip-spans.

Im folgenden Quelltext sind die Maße in em angegeben, also abhängig von der Schriftgröße, so dass bei
großer Schrift das Menü mitwächst. Es sind aber natürlich auch absolute Maße z.B. in px möglich. - Wichtige
Stellen sind markiert - der Rest ist Geschmackssache:

Code:


Wer bis hierhin durchgehalten hat, sollte nun selber experimentieren - aber Achtung! So logisch manches
klingt, so tückisch sind die kleinen Eigenheiten der verschiedenen Browser. Manchmal sind Tooltips aber
so praktisch, dass sich der Aufwand doch lohnt, zumal wenn man mit ein wenig Hintergrundwissen und einer
funktionierenden Grundlage herangeht. - Viel Vergnügen!


  


>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!