Jeder kennt sie, fast jeder mag sie, die praktischen Fensterchen, die bei bestimmten Wörtern aufpoppen und hilfreiche Extrainfos beinhalten – so genannte Tooltips.

Ursprünglich gedacht um Abkürzungen (Akronyme) verständlicher zu machen, inzwischen hauptsächlich für Werbezwecke (Text Ads) missbraucht. Trotzdem, richtig an den passenden Stellen eingesetzt, können TooltipsPop-Up mit zusätzlichen und hoffentlich nützlichen Informationen die Nutzerfreundlichkeit einer Webseite steigern.

Schwerfälliger JavaScript-Code ist dafür – wie so oft – nicht vonnöten. Ganze 4 Zeilen wunderschönes CSS reichen mir für meine Tooltips völlig aus…

Tooltips aus CSS – so wird’s gemacht!

Grundsätzliche Kenntnisse zu CSS sollten vorhanden sein, damit ich hier nicht zu sehr ins Detail gehen muss. Der Code ist aber schnell zu durchschauen.

Schritt 1

Im Grunde funktioniert das BeispielwortNur ein Beispiel, um den Tooltip zu demonstrieren. wie ein Link. Nur, dass ich dessen Funktionen etwas manipuliere.

Ich definiere also eine neue Klasse für Links und nenne diese “tooltip”. Natürlich könnte die Klasse auch ganz anders heißen…

a.tooltip

Die Position ist relativ und ich setze einen hohen z-index, damit das Pop-Up möglichst nicht durch andere Elemente der Webseite überlagert werden kann. Cursor:help sorgt dafür, dass beim Anfassen des Beispielwortes kein Zeigefinger, sondern ein Fragezeichen erscheint. Background und text-decoration gestalten das Aussehen des Beispielwortes.

a.tooltip { position:relative; z-index:75; cursor:help; background:#00ff00; text-decoration:none; }

Schritt 2

Die nächste Zeile befasst sich mit dem Verhalten des Beispielwortes beim Anfassen (hover).

Ich verändere hier lediglich die Schriftfarbe. Davon sieht man hier auf der Seite nichts, was beabsichtigt ist. In Posts auf emaster.de verändern sich Links normalerweise bei hover in grün, was ich im Falle von Tooltips aber vermeiden möchte. Ich möchte, dass sich der Beispieltext gar nicht verändert, damit die volle Aufmerksamkeit des Lesers auf den Tooltip gelenkt wird.

a.tooltip:hover { color:#000; }

Schritt 3

Den eigentlichen Inhalt des Tooltips definiere ich als <span> innerhalb des Linktextes (Beispielwort). Dazu später mehr…

Damit dieser Inhalt aber nicht dauerhaft angezeigt wird, kommt zunächst Display:none zum Einsatz:

a.tooltip span { display:none; }

Schritt 4

Berühre ich jetzt das Beispielwort, soll der komplette Tooltip angezeigt werden. In der gleichen Zeile lege ich Farbe, Größe, Position und Schrift-Stile fest, es wird also etwas länger:

a.tooltip:hover span { display:block; position:absolute; top:20px; left:50%; width:120px; padding:2px; background:url (dateipfad/hintergrund.png); border:1px solid #000; color: #000; text-align:center; }

Hier sieht man, dass man sich bei der Gestaltung des Tooltips richtig austoben kann.

Ich gebe dem Tooltip eine absolute Position unterhalb [top:20px], und die linke Kante genau auf der Hälfte [left:50%] des BeispielwortesDas sieht man hier nochmal..

Eine fixe Breite [width:120px] und etwas Innenabstand [padding:2px] möchte ich haben, sowie einen halb-transparenten Hintergrund [background:url(dateipfad/hintergrund.png)], dazu noch die üblichen Verdächtigen zur Gestaltung der Schrift.

Natürlich tut es auch eine ganz normale Farbe als Hintergrund… Überhaupt schreien diese Code-Zeilen ja förmlich nach selber-experimentieren ;)

Tooltip mit CSS – Der HTML-Code

Wie muss ich das Beispielwort letztendlich präparieren, damit der Tooltip erscheint?

Wo auch immer ich gerade an einem Artikel schreibe, ich wechsle in die HTML-Ansicht und mache aus dem Beispielwort einen Link der Klasse .tooltip, also:

<p>Lorem Ipsum <a class=”tooltip”>Beispielwort</a> dolor sit amet…</p>

Innerhalb des selben Links füge ich nun noch den <span> Container mitsamt des gewünschten Inhalts ein:

<p>Lorem Ipsum <a class=”tooltip”>Beispielwort<span>At vero eos et accusam et justo duo dolores et ea rebum.</span></a> dolor sit amet…</p>

Das war es schon. So sieht meine Toolbox jetzt aus: BeispielwortAt vero eos et accusam et justo duo dolores et ea rebum.

Um eventuelle Probleme mit Verschachtelungen auszuschließen, kann .tooltip auch einer übergeordneten Klasse angehängt werden. Das sieht dann z.B. so aus:

.content a.tooltip {}

Also ich find’s gut und hoffe, es hat Spaß gemacht und was gebracht.

Kategorie: Tutorien
Tags: CSS, Tooltip, Tutorial
Veröffentlicht am 03.05.2010 von admin | Was sagen Sie dazu?