nicht angemeldet
Hallo, Kai,
ganz genau geht's so:
<a>Text<span>Tooltip</span></a>
jetzt bekommt das "a" ein position:relative, und für "a span" gibt's ein position:absolute - der Rest kommt dann von alleine.
Hier gäbe es zu beachten, dass obige Version nicht sehr abwärtskompatibel und zugänglich ist. Wenn man gleichzeitig noch mit display:block für die a-Elemente arbeitet, dann bekommt man ohne CSS: TextTooltip TextTooltip TextTooltip TextTooltip ...
Das ist vor allem für Textbrowser und CSS-Ignoranten problematisch und stellt Barrieren für behinderte Menschen dar.
Ich dachte daran, dass man eventuell Füllzeichen einfügen könnte, welche man für CSS-Browser versteckt. So in der Art:
<a>Text<span style="display:none;">: </span><span class="tooltip">Tooltip</span></a><span style="display:none;"><br /></span>
<a>Text...
Wobei man nun streiten könnte, ob man den Tooltiptext mit in das a-Element aufnehmen sollte (klar, es ist nötig, aber man könnte das position:relative auch einem span-Element zuweisen, welches das a-Element und den Tooltiptext umschließt). Ein Screen Reader, der die Links einer Seite vorliest, sollte bspw. besser nur den Rubriknamen (falls es sich um eine Navigation handelt) anstatt die ellenlange Beschreibung vorlesen. accesskey und tabindex für den Link würde ich auch noch einfügen. Wenn möglich auch einen Link, mit dem man die Navigation überspringen kann (bei Bedarf kann man den auch mit display:none verstecken).
Gutes Markup ist das imho auch nicht. Eine Definitionsliste (dl) o.ä. wäre hier zur Strukturierung angemessener. Dürfte man auch hinkriegen, wenn ich mir Eric Meyers Menü ansehe, welches auf einer verschachtelten unsortierten Liste basiert.
Alles sehr umständlich; ich vertraue dem title-Attribut. :)
Mathias