Tooltipps mit CSS gestalten

In dieser kleinen Anleitung werdet ihr erfahren, wie einfach es ist, die Standard Tooltipps durch eigene, mit Hilfe von CSS, zu ersetzen. Allerdings werde ich unseren Lieblingsbrowser IE6 und kleiner nicht berücksichtigen.

Hierbei soll es auch nur um die grundlegenden Techniken gehen und nicht um Effektspielereien, die die neuen CSS3-Eigenschaften zu bieten haben. Was euch natürlich nicht davon abhalten soll, eure Tooltipps oder auch Bildbeschreibungen mit CSS3 aufzupeppen.

Beispiel 1 Abkürzung definieren

In diesem Beispiel soll in einem Absatz <p> eine Abkürzung mit <abbr> hervorgehoben und beim Überfahren mit der Maus eine Definition mit <dfn> eingeblendet werden.

Mit abbr werden Textbereiche gekennzeichnet, die eine Abkürzung enthalten, bspw. CSS.

1. HTML-Markup für einen Tooltipp erstellen

<p>
 Mit<abbr tabindex="0"  class="quickinfo"> CSS <dfn><strong>Cascading Stylescheets <br>dienen zum Formatieren von Webseiten und sind der Schlüssel zum Erfolg.</strong></dfn></abbr>lassen sich sehr einfach
 Tooltipps oder auch Quickinfos erstellen.
</p> 

Mit dem Attribut tabindex="0" kann mit der Tastatur auf die Quickinfo zugegriffen werden.

Style-Angaben für <abbr>

abbr.quickinfo {
  position: relative;
  border-bottom: 3px double #0a0;
  color: #0a0;
  cursor: pointer;
  outline:none;
}

Mit position:relative sorgen wir dafür, dass sich die Quickinfo am abbr-Tag orientieren kann. Die gestrichelte Umrandung bei einer Fokusiereung der Quickinfo wird mit outline:none unterbunden. Eine Alternative Fokuskenzeichnung sollte aber immer in Betracht kommen und dient der besseren Orientierung.

Style-Angaben für <dfn>

abbr.quickinfo dfn {
  margin-left: -9999em;
  padding:40px;
  position: absolute;
  left: 0;
  top:0;
  width: 250px;
}

Da wir Screenreader berücksichtigen wollen, wird die Quickinfo mit margin-left:-9999em aus dem sichtbaren Bereich katapultiert. Mit position:absolute wird der Text zwischen dfn aus dem Fluss genommen. Seid bitte vorsichtig bei der Vergabe von negativen Werten. Unter Umständen können so Inhalte der Quickinfo verloren gehen. Am Besten ist, sich auf left:0 , top:0 oder bottom:0 zu beschränken. Den benötighten Abstand erreichen wir durch einen großzügigen Wert bei padding. Warum es unbedingt padding sein sollte, werdet ihr gleich erfahren.

Style-Angaben für :hover und :focus

abbr.quickinfo:hover dfn , 
abbr.quickinfo:focus dfn {
  margin-left: 0;
  z-index: 99;
}

Zunächst wird mit margin-left:0 die Definition dfn in den sichtbaren Bereich verschoben. Mit z-index:99 sorgen wir dafür, dass die Quickinfo immer auf der obersten Ebene liegt.

So sieht es bis jetzt aus. Übrigens, die Hintergrundfarbe dient der besseren Verdeutlichung von padding.

Mit CSS Cascading Stylescheets
dienen zum Formatieren von Webseiten und sind der Schlüssel zum Erfolg.
lassen sich sehr einfach Tooltipps oder auch Quickinfos erstellen.

Zugegeben, es sieht noch nicht so toll aus. Aber die Angabe von padding ist eine recht gute Methode, um dem Anwender den Zugriff auf die Quickinfo mit Hilfe der Cursor-Tasten auch dann zu ermöglichen, wenn sich die Hervorhebung am rechten Rand befindet und sich so Teile der Quickinfo außerhalb des sichtbaren Bereichs befinden. Mit margin wüdre sich die Quickinfo beim horizontalen Scrollen wieder schließen und ein Lesen der Information wäre somit nicht mehr möglich.

Um die Quickinfo nun erwartungsgemäß zu stylen, benötigen wir noch ein weiteres Element. Für dieses Beispiel habe ich mich für das <strong> entschieden. Nachfolgend seht ihr die selbsterklärenden Formatiereungen für die Klasse .quickinfo strong.

abbr.quickinfo strong {
  display:block;
  background:#ffd;
  padding:5px;
  border:1px solid #000;
  font-size:.75em;
  font-weight:normal;
  color:#000;
}

Zum Schluss noch schnell die fehlende Hervorhebung von abbr beim Fokosieren.

abbr.quickinfo:focus {
 background:#000;
 color:#fff;
 border:none;
}

Hier nun das Endergebnis.

Mit CSS Cascading Stylescheets
dienen zum Formatieren von Webseiten und sind der Schlüssel zum Erfolg.
lassen sich sehr einfach Tooltipps oder auch Quickinfos erstellen.

Wer sein Tooltipp lieber oberhalb haben möchte, einfach im Selektorblock .quickinfo dfn top:0 durch bottom:0 ersetzen.

Ergänzung für IE > 6

Leider musste ich feststellen, dass der Trick mit padding im Internet Explorer > 6 nicht funktionieren will. Der IE benötigt zwingend eine Hintergrundfarbe. Da dfn transparent sein soll und die Angabe background:transparent nicht ausreicht, müssen wir hier einen kleinen Trick anwenden und den IE eine Hintergrundgrafik untermogeln, welche nicht existiert.

abbr.quickinfo dfn {
  margin-left: -9999em;
  padding:40px;
  position: absolute;
  left: 0;
  top:0;
  width: 250px;
  background:url(DateiDieNichtExsistiert.gif) ;
}

Wem die Sache nicht geheuer ist, der kann hier natürlich eine exsistierende transparente Grafikdatei angeben.

Und hier geht's weiter mit Bildbeschreibung erstellen und mit CSS gestalten.

erstellt am 23.09.2012 Aktualisiert am 01.10.2012

nach oben