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);  
}

[Kai]

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

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

im aktuellen Firefox getestet

Gruss Kai

[Kai]

a.tooltipp {  
        position: relative;  
}  
a.tooltipp span {  
        display: none;  
}  
a.tooltipp:hover span {  
		position: absolute;  
        display: inline-block;  
        font: 8pt "Trebuchet MS", sans-serif;  
        top: 20px;  
        left: 30px;  
        background: #e6ecff;  
        border: 1px solid #003399;  
        text-decoration: none;  
        padding: 3px;  
        opacity: .9;  
        filter: alpha(opacity=90);  
        box-shadow: 2px 2px 2px Silver;  
        border-radius: 3px;  
}  

noch einmal etwas modifiziert

[Kai]

a.tooltipp {  
	position: relative;  
}  
a.tooltipp span {  
	position: absolute;  
	display: none;  
	color: black;  
	font: 8pt "Trebuchet MS", sans-serif;  
	top: 20px;  
	left: 30px;  
	background: #e6ecff;  
	border: 1px solid #003399;  
	text-decoration: none;  
	padding: 3px;  
	opacity: .9;  
	filter: alpha(opacity=90);  
	box-shadow: 2px 2px 2px Silver;  
	border-radius: 3px;  
}  
a.tooltipp:hover span {  
	display: inline-block;  
}

logisch modifiziert

[Jörg Reinholz]

tooltipp.css:

#inhalt {  
        // Damit auch Platz für die Tooltipps ist:  
        margin-right:10em;  
        margin-bottom:10em;  
}  
  

>.hasTooltipp {  
>        position: relative;  

         // kein Link, sonst unschönes Springen bei Klick  
         // Nachteil: I6 kann dann Tooltipps nicht anzeigen  
         text-decoration: underline;	  

> }  
> .hasTooltipp > span {  // Beschränkung auf direkte Kinder  
>  	position: absolute;  
> 	display: none;  
>  	color: black;  
> 	font: 8pt "Trebuchet MS", sans-serif;  

        // 2 Zeilen geändert:  

> 	top: 2em;  
> 	left: 2em;  
> 	background: #e6ecff;  
> 	border: 1px solid #003399;  
> 	text-decoration: none;  
>  	padding: 3px;  
> 	opacity: .9;  
> 	filter: alpha(opacity=90);  
> 	box-shadow: 2px 2px 2px Silver;  
> 	border-radius: 3px;  

        // hinzugefügt, damit Tooltipp nicht vom nächsten Wort überdeckt wird:  
        z-index:999;  
        // korrespondierend mit Rand des übergeordneten Elementes an  
        // rechter Seite damit der Tooltipp nicht "verschwindet":  
        max-width:10em;  

> }  
> .hasTooltipp:hover > span {  
> 	display: inline-block;  
> }

Das HTML zum Testen:

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="UTF-8" />  
  <title>Tooltipp</title>  
  <link rel="stylesheet" type="text/css" href="tooltipp.css">  
</head>  
<body>  
  <h1>Tooltipps</h1>  
  <div id="inhalt">  
    <script type="text/javascript">  
      for (i=1; i<1002; i++) {  
document.write ('<span class="hasTooltipp">Wort&nbsp;' + i + '<span><strong>Tipp Nr. ' + i + ':</strong><br />Das ist der Tooltipp zum Wort Nr.&nbsp;' + i + ' mit ganz wichtigen Informationen!</span></span> sonstiger Text. ');  
      }  
    </script>  
  </div>  
</body>  
</html>