Problem mit Tooltip

[Dave]

Ich hab ein kleines Problem mit Tooltips, die ich via CSS realisiert habe (möchte auf JS möglichst verzichten.

Es geht um eine Interlinear-Übersetzung der Bibel, bei der die Deutsche Übersetzung auftauchen soll, wenn man mit der Maus über das Wort geht:
http://www.2jesus.de/online-bibel/interlinear/matthaeus-1.html

Klappt auch genauso wie ich mir das vorgestellt habe. Das Problem ist allerdings, das sich es irgendwie nicht hinbekomme, dass der Tooltip auch immer ganz oben angezeigt wird und am rechten Rand immer abgeschnitten wird. Hab jetzt schon verschiedene Experimente mit z-index und position gemacht, aber irgendwie komme ich da gerade nicht weit.

Wenn ich das Anchor-Element auf absolut setze funktioniert es, allerdings verschiebt sich dann der gesamte Text wenn man mit der Maus über das Element geht.

Bin auch nicht so der große CSS-Profi. Wo ist da bei mir der Denkfehler?

Vielen Dank
Gruß, Dave

<a href="#" class="tooltipp">Griechisches Wort<div>Übersetzung</div></a>

a.tooltipp  
{  
	position: relative;  
	z-index:1;  
}  
  
  
a.tooltipp div  
{  
	display: none;  
	z-index: 1;  
}  
  
a.tooltipp:hover  
{  
	z-index: 2;  
}  
  
a.tooltipp:hover div  
{  
	width: 300px;  
	font: 8pt "Trebuchet MS", sans-serif;  
 	position: absolute !important;  
 	display: block;  
	z-index: 99;  
	top: 30px;  
	left: 30px;  
	background: #e6ecff;  
	border: 1px solid #003399;  
	text-decoration: none;  
	padding: 3px;  
	opacity: .9;  
	filter: alpha(opacity=90);  
}