Tool-Tip mit HTML

<script>
wmtt = null;
 
document.onmousemove = updateWMTT;
 
function updateWMTT(e) 
{
	x = (document.all) ? window.event.x + document.body.scrollLeft + 180: e.pageX;
	y = (document.all) ? window.event.y : e.pageY;
if (wmtt != null) 
	{
		wmtt.style.left = (x + 20 - 180) + "px";
		wmtt.style.top 	= (y + 20) + "px";
	}
}
 
function showWMTT(id) 
{
	wmtt = document.getElementById(id);
	wmtt.style.display = "block"
}
 
function hideWMTT() 
{
	wmtt.style.display = "none";
}
</script>
 
 
<style>
.tooltip2 {
	position: absolute;
	display: none;
	background-color: #FFFFFF;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	padding: 2px;
}
.tooltip2 .head{
	background-color: #006666;
	color: white;
	font-weight: bold;
	padding: 2px;
}
.tooltip2 .content{
	color: 000066;
	font-size: 10px;
	border-size: 4px;
}
.tooltip2 .content td{
	width: 50%;
	font-size: 10px;
	text-align: center;
}
</style>
 
 
<!-- Ab hier die Box info -->
<div class="tooltip2" id="2" style="width: 150px;">
	<div class="head">&Uuml;berschrift</div>
	<div class="content">
		<p>Hier kann <strong>beliebiger Text</strong> stehen!
		Der auch beliebig mit <strong>HMTL</strong> angereichert sein kann.</p>
		<p>Zum Beispiel auch eine Tabelle:</p>
		<table width="100%">
			<tr>
				<td>Ich</td>
				<td>bin</td>
			</tr>
			<tr>
				<td>eine</td>
				<td>Tabelle</td>
			</tr>
		</table>
	</div>
</div>
<!-- Ende -->
 
 
<a href="#" onMouseOver="showWMTT('2')" onMouseOut="hideWMTT()">Fahre mit der Maus drüber </a>