ich bin auf der Suche nach einer CSS-Lösung, um zu Hyperlinks zusätzlichen Text einzublenden. Das title-Attribut wollte ich dazu nicht verwenden. JavaScript-basierte Lösungen dürfen es auch nicht sein. Wenn es im IE6 und im FF1.x funktionieren würde, wäre ich auch schon zufrieden.
Auf die Lösung unten trifft das auch schon zu, nur wenn ich dort die Formatierungen für a und a:hover lösche, weil ich die Hyperlinks gar nicht formatieren möchte, funktioniert das Ganze in IE6 nicht mehr. Warum? Kennt jemand eine andere Lösung unter den genannten Voraussetzungen?
Hi, warum es genau im Internet Explorer nicht funktioniert kann ich dir nicht sagen, deswegen würde ich die Formatierung für den box internen a:hover drin lassen. Vermutlich benötigt der IE eine Angabe, um den Tooltipp Inhalt daran auszurichten. Deshalb kann man display:block reinschreiben oder auch einfach background:none; etc. Ohne eine solche „Formatierungsangabe“ habe ich es im IE auch nicht hinbekommen. Ein weiterer Tipp, warum mit einer ID für deine „Box“ arbeiten. Das ganze als zuweisbares class-Attribut erlaubt dir beliebig viele Tooltipps in deiner Seite zu verwenden. Siehe auch umgebastelter Seitenquelltext, ich denke darum ging es dir im wesentlichen.
Es folgt HTML Seitenquelltext mit interner CSS Angabe:
Ich habe noch ein „position:absolute;“ hinzugefügt, dann wird der Rest der Seite nicht so durchgeschüttelt, und die CSS-Anweisungen in den Selektor „.box a:focus span“ hereinkopiert, damit zumindest die FF-Nutzer beim Springen per Tab-Taste auch den Tooltip sehen.