Jörg Reinholz: Problem mit Tooltip

Beitrag lesen

SELF-Forum

Problem mit Tooltip

Jörg Reinholz
– Informationen zu den Bewertungsregeln

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>
Beitrag melden
–
Informationen zu den Bewertungsregeln