Jeder kennt sie, jeder mag sie. Sagen sie uns doch, was hinter eine Link zum Vorschein kommen wird oder welche Bedeutung ein Bild hat: Tooltips. Tooltips zeigen definierte Attribute eines Hyperlinks, eines Bildes etc. an, wenn wir mit der Maus darüber fahren und dort kurze Zeit verweilen. Nun gibt es unendliche Möglichkeiten das Aussehen eines Hyperlinks zu ändern; das Aussehen eines Tooltips ist im Betriebssystem verankert und kann nicht verändert werden.

Es kann nicht verändert werden? Was soll dann dieser Artikel? Nun, da das Design eines Tooltips nicht verändert werden kann, müssen wir ihn abschalten und ersetzen. Wie gefällt euch diese Lösung:

Anhand eines horizontal ausgerichteten Menüs zeige ich Schritt für Schritt den Weg zu individuell gestalteten Tooltips. Wir nutzen dazu insbesondere die Pseudoelemente :before und :after sowie allerhand CSS3-Kram, wie box-shadow, border-radius und transform.

Das Menü anlegen

Beginnen wir mit dem Menü. Wir definieren ein einfaches Menü mit Listenelementen, etwa so:

<div class="menu">
	<ul>
		<li><a href="#" title="Home">Home</a></li>
		<li><a href="#" title="Über mich">Über mich</a></li>
		<li><a href="#" title="Kontakt">Kontakt</a></li>
		<li><a href="#" title="Gästebuch">Gästebuch</a></li>
		<li><a href="#" title="Impressum">Impressum</a></li>
	</ul>
</div>

Um das Menü horizontal auszurichten definieren wir:

.menu {
 position: relative;
 float: left;
}

.menu ul {
 padding: 0;
 margin: 0 20px;
}

.menu ul li {
 float: left;
 list-style: none;
 padding: 10px;
}

Voilà

Menü-Styling-Feinarbeit

Wo wir gerade dabei sind, hübschen wir das Ganze noch etwas auf und ergänzen:

/* Google Web Font einbinden */
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

.menu {
	background: #2e3133;
	margin: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	font-family: 'Droid Sans', sans-serif;
	font-size: 14px;
	font-weight: bold;
}

.menu a {
	color: #fff;
	text-decoration: none;
}

Wir haben dem Menü einen Hintergrund mit runden Ecken und Schatten verpasst und den Google Web Font „Droid Sans“ per @import eingebunden.

Unsere eigenen Tooltips einbinden

Damit die Standard-Tooltips nicht mehr angezeigt werden, entfernen wir das title-Attribut aus unseren Links:

<div class="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Über mich</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">Gästebuch</a></li>
		<li><a href="#">Impressum</a></li>
	</ul>
</div>

Um jedem Menüpunkt einen individuellen Tooltiptext zuweisen können, definieren wir nun für jeden Menüpunkt eine eigene Klasse:

<div class="menu">
	<ul>
		<li><a class="home" href="#">Home</a></li>
		<li><a class="ich" href="#">Über mich</a></li>
		<li><a class="kontakt" href="#">Kontakt</a></li>
		<li><a class="gb" href="#">Gästebuch</a></li>
		<li><a class="impressum" href="#">Impressum</a></li>
	</ul>
</div>

Die Tooltips binden wir mittels des Pseudoelements :after ein.

.menu ul li a:hover:after {
	position: absolute;
	width: 150px;
	top: 50px;
	left: 50%;
	margin-left: -85px;
	padding: 10px;
	background: #333;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	font-size: 12px;
	line-height: 16px;
	font-weight: normal;
	text-align: center;
}

Wir haben die Tooltips absolut unter dem jeweiligen Menüelement ausgerichtet. Indem wir den Abstand zum linken Rand (left) auf 50% gesetzt und den Außenabstand links (margin-left) um die Hälfte der Breite des gesamten Tooltips verringert haben (Weite (width) 150px sowie Innenabstand (padding) links und rechts je 10px = 170px / 2 = 85px) sind die Tooltips mittig zum Menüelement ausgerichtet.

Aber wir haben noch etwas vergessen: die Pseudoelemente :after und :before erwarten immer einen Inhalt (content); ansonsten werden sie nicht angezeigt. Diesen content, der zugleich den Inhalt der Tooltips darstellt, binden wir nun für jede Klasse separat ein:

.menu ul li a.home:hover:after {
	content:"Das ist die Startseite. Oder was hast du erwartet?";
}

.menu ul li a.ich:hover:after {
	content:"Hier geht's um mich";
}

.menu ul li a.kontakt:hover:after {
	content:"Freue mich immer über Post";
}

.menu ul li a.gb:hover:after {
	content:"Komm schon in's Gästebuch";
}

.menu ul li a.impressum:hover:after {
	content:"Rechtliches Zeugs";
}

So schaut’s aus:

Damit haben wir unser Ziel erreicht und einen individuellen Tooltip für jedes Menüelement. Habt ihr noch Lust weiterzumachen? Das Pseudoelement :before müssen wir noch irgendwo unterbringen. Wäre doch Schade drum.

Wir nutzen :before für einen kleinen Pfeil in Richtung des Menüelements. Schaut euch das Bild ganz oben im Artikel an, dann wisst ihr was ich meine.

Definiert folgendes:

.menu ul li a:hover:before {
	position: absolute;
	content: "";
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 45px;
	left: 50%;
	margin-left: -10px;
	background: #333;
}

Wir wenden hier einen kleinen Trick an. Wir erstellen einen Würfel mit einer Kantenlänge von 10px. Mittels transform und rotate drehen wir diesen um 45 Grad und verschieben ihn zur Hälfte in den Tooltip. Da sich die beiden Elemente überlagern, funktioniert das natürlich nur, wenn beide dieselbe Hintergrundfarbe haben.

Auch diesen Pfeil binden wir wieder absolut ein und zentrieren ihn, wie oben beschrieben, innerhalb des Tooltips.

Welche Browser spielen mit?

Thema Browsersupport. Unterstützung für Pseudoelemente bieten der Firefox ab Version 3.5, Safari ab 4, alle Versionen von Chrome, Opera ab Version 6 sowie der Internet Explorer ab Version 9.

Leider gibt es keine Browser-Unterstützung für transitions auf Pseudoelemente. Wäre natürlich klasse, wenn die Menüelemente animiert werden könnten. Aber das wird bestimmt noch.

So. Ich bin fertig. Nun seid ihr dran.

Wer keine Lust zum nachmachen hat, kann sich das Menü mit Tooltips auch fertig herunterladen.

Viel Spass damit.