Tooltips mit CSS3 umsetzen

Tooltips sind nützliche kleine Erklärungen zu eventuell unbekannten Begriffen oder Ähnlichem. Tooltips haben gegenüber dem title-Tag den Vorteil, dass sie individuell an das Design der Seite angepasst werden können.
Um einen Tooltip zu erstellen, gehen wir ähnlich vor wie bei einem Dropdown Menü, das mit CSS umgesetzt wurde.

 <p>Um den Tooltip zu sehen, fahren Sie mit der Maus über <em><span class="tip">Das hier ist der Tooltip</span>Tooltip</em>.</p>
Code-Sprache: HTML, XML (xml)

Das war schon der HTML-Teil, der em-Tag kann ebenso wie der span-Tag natürlich ersetzt werden, muss dann natürlich im nun folgenden CSS Code aber auch angepasst werden.

.tooltip{
	color:#7B7B7B;
	cursor:help;
	position:relative;
}
em span.tip{
	position:absolute;
	background-color:rgba(0,0,0,.9);
	color:#ff7800;
	padding:15px;
	font-style:normal;
	top:45px;
	left:-50px;
	font-size:80%;
	white-space:pre;
	box-shadow:#000 3px 3px 10px;
	visibility:hidden;
	opacity: 0;
	-webkit-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	-moz-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	-ms-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	-o-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
	transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.7s;
} 
.tooltip:hover span.tip{
	position:absolute;
	background-color:rgba(0,0,0,.9);
	color:#ff7800;
	padding:15px;
	font-style:normal;
	top:45px;
	left:-50px;
	font-size:80%;
	white-space:pre;
	box-shadow:#000 3px 3px 10px;
	visibility:visible;
	opacity:1;
	-webkit-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	-moz-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	-ms-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	-o-transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
	transition:opacity 0.5s ease-in-out 0.2s, visibility 0s linear 0.2s;
}
Code-Sprache: CSS (css)

Vieles dürfte selbsterklärend sein. In Zeile 4 positionieren wir den Text, der immer da ist relativ, damit wir in Zeile 7 den Tooltip absolut dazu positionieren können. Dieser wird standardmäßig durch visibility:hidden und opacity:0 versteckt.
Beim hover steht der identische Code, nur ist visibility auf visible gesetzt und opacity auf 1.
Vielen Dank an dieser Stelle gebührt trixster aus dem Forum der-webdesigner.net, dessen CSS3 Code aus diesem Beitrag ich als Vorbild genutzt habe.