Dynamische Webseite mit Dropdownmenü mit CSS + PHP

Tool Tipp

Wie kann man einen Tooltipp erstellen.

HTML

<p>
	Wie kann man einen 
		<a 	
			href="#" 
			class="tooltip"
			data-tooltip="Ein Tool-Tipp ist eine Zusatzinformation, die beim Überfahren mit der Maus eingeblendet wird."
			>Tooltipp</a> erstellen.
</p>

CSS

/*Tool-Tipp*/
a.tooltip{
	position: relative;
	text-decoration: none;
	border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

a.tooltip:after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 130%;
	left: 20%;
	background: #555;/*#ffcb66;*/
	padding: 0.6em 1em;
	color: #fff;
	border-radius : 0.5em;
	border-color: #555 transparent transparent transparent;
	opacity: 0;
}

/*zeige den Text, beim überfahren mit der Maus*/
a.tooltip:hover:after {
  bottom: 100%;
	opacity: 1;
}