CSS-Tooltip

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

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?

Infobox
<!–

#box a {
color: green;
text-decoration: none;
}

#box a:hover {
color: white;
background: green;
text-decoration: none;
}

#box a span {display: none;}

#box a:hover span {
display: block;
color: black;
background: white;
width: 300px;
border: 1px solid green;
padding: 10px;
}

–>
Text Noch mehr Text …

Vile Grüße,

ujk

#2

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:

Infobox
<!–
.box a:hover {
background:none;
}

.box a span
{display: none;}

.box a:hover span
{
display: block;
width:auto;
background: #FFFFDD;
border: 1px dotted #CC9966;
width:200px;
padding: 4px;
color:#000;
}

–>
Text Noch mehr Text …

www. wer-weiss-was.de …

Buch …stabensalat

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#3

Hallo,

vielen Dank, das hilft mir weiter.

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.

Vielen Dank und *,

ujk