WCM Forum - CSS Link-ToolTip

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - CSS Link-ToolTip (http://www.wcm.at/forum/showthread.php?t=198485)

CSS Link-ToolTip

Ich möchte ein Tooltip mit CSS erstellen, das beim hovern eines Links erscheint. In Firefox funktioniert es auch tadellos, nur der IE will nicht so recht.

Code:

a.blog, a.blog:link, a.blog:visited, a.blog:active    

{ 

        position:relative;

        font-family:"Trebuchet MS", Helvetica, Verdana; 

        font-size:8pt; 

        color:#C40000; 

        text-decoration:none; 

}



a.blog:hover

{

        background-color:#AEDF7D;

        color:#333;

}



a.blog span {

  display:none;  

  text-decoration:none; 

}



a.blog:hover span 

{

  position:absolute;

  display:block;

  z-index:100;

  top: 20px; 

  left:0; 

  width:250px;

  color:#333;

  padding:3px 3px 3px 3px; 

        border:1px solid #AEDF7D; 

        background-color:#EFFFDF;

  font-size:11.5px;

  font-family:"Trebuchet MS", Helvetica, Verdana; 

}

Ein Beispiel seht ihr auf http://www.chili-it.at/template.asp?page=test

Weiß wer, was ich falsch mache??

Der Tooltip auf dieser Seite http://webbe.de/index.shtml?CONTENT=...oltip;LANG=de# funktioniert auch mit IE, sieh dir mal an wie sie es machen.

jak

Von der Seite hab ich den Code ja. Es funktioniert schon, nur scheint es ein Problem mit dem Layer zu geben. Sprich: Die Schrift, die hinter dem ToolTip steht, seh ich auch. Das soll natürlich nicht sein.

Bei mir gehts auch auf deiner Seite.

Habs gestern noch rausgekriegt. Und zwar hab ich z-index bei den gehoverten Links auf einen niedrigeren Wert als bei dem span

Also:

Code:

a.blog, a.blog:link, a.blog:visited, a.blog:active    

{ 

        position:relative;

        font-family:"Trebuchet MS", Helvetica, Verdana; 

        font-size:8pt; 

        color:#C40000; 

        text-decoration:none; 

}



a.blog:hover

{

  z-index:1000;

        background-color:#AEDF7D;

        color:#333;

}



a.blog span {

  display:none;  

  text-decoration:none; 

}



a.blog:hover span 

{

  position:absolute;

  display:block;

  z-index:100;

  top: 20px; 

  left:0; 

  width:250px;

  color:#333;

  padding:3px 3px 3px 3px; 

        border:1px solid #AEDF7D; 

        background-color:#EFFFDF;

  font-size:11.5px;

  font-family:"Trebuchet MS", Helvetica, Verdana; 

}