[CSS] MouseOver Tooltip ohne JavaScript anzeigen

Drucken
( 17 Votes )
Hauptkategorie: Programmieren Kategorie: CSS
Erstellt am 14.03.2012 Zuletzt aktualisiert am 14.03.2012 Geschrieben von Jonny132
Bislang war es nur per JavaScript möglich ToolTips (Kleine Fenster die Angezeigt werden wenn man mit der Maus über ein Wort fährt anzuzeigen.
Den einzigen Workaround den man bisher verwenden konnte war das 'Missbrauchen' des Title-Tags was aber auch nicht zuverlässig ist UND nur auf Text begrenzt ist.

Mittels eines kleinen CSS-Hacks ist es in gängigen Browsern nun möglich diese Tooltips ganz ohne JavaScript anzuzeigen. Dies erreichen wir indem wir den Hover - State eines Links den wir per CSS definieren können ausnutzen.

CSS-Definitionen:
a.tooltip
{
  position: relative;
  text-decoration: none;
  color: black;
}
Die Links die wir als MouseOver ToolTip Missbrauchen wollen, versehen wir mit dem Class-Attribut "tooltip". Wir geben dem Link ein ganz normales aussehen. Der Schlüssel hierbei ist, dass er die Definition postition:relative; bekommt! 
a.tooltip span
{
  display: none;
}
In dem Link befindet sich ein Span-Element, welches den Inhalt des MouseOver Tooltipsdarstellen soll. Deshalb ist dieser standartmäßig nicht sichtbar. 
a.tooltip:hover span
{
  position: absolute;
  display: block;
  top: 1.5em;
  left: 2em;
  border: 1px solid black;
  background-color:white;
  padding: 0.2em;
}
Nun fehlt nurnoch die Definition für das Span-Element wenn der User mit der Maus über das als ToolTip missbrauchten Link-Element fährt. Hier ist wiederrum der Schlüssel die Position auf 'absolute' zu stellen. Wir nehmen zusätzlich vom Link oben 1.5em und von links 2em Abstand. Damit wird das ToolTip etwas rechts-unten vom Link versetzt angezeigt.

Beispiel:
Überqueren Sie mich mit der Maus!Ich bin ein ToolTip der aus einem Text besteht oder Überqueren Sie mich mit der Maus!

Der HTML-Code für die Links sieht nun folgendermaßen aus:
<a href="#" class="tooltip">Überqueren Sie mich mit der Maus!<span>Ich bin ein ToolTip der aus einem Text besteht</span></a>
oder
<a href="#" class="tooltip">Überqueren Sie mich mit der Maus!<span><img src="/test.png" /></span></a>
Zusätzlich muss ich noch sagen, dass diese Methode nicht ausführlich unter allen Browsern getestet wurde. Die Funktionsweise dieser Methode ist also nicht sicher!

    Veröffentlichen Sie ihre Kommentare ...