Den üblichen Tooltipp kennen Sie - man berührt ein Seitenelement und es öffnet sich ein gelbes Fensterchen mit zusätzlichen Informationen. Erweiterte Möglichkeiten bietet css mit dem Hover-Effekt. Folgendes soll passieren. Ruht die Maus auf einem Hyperlink, öffnet sich ein kleines Fenster mit Hinweisen. Die Position des Fensters kann frei bestimmt werden, sein Inhalt ist beliebig und kann formatiert werden. Es wird folgendes gemacht: Der Tooltipp befindet sich auf der Seite, wird jedoch nicht angezeigt, da mit display:none seine Anzeige unterdrückt wird. Der Tooltipp befindet sich innerhalb eines Layers, so kann er beliebig positioniert werden (ohne Rücksicht auf vorhandene Inhalte). Befindet man sich nun mit dem Mauszeiger auf dem Hyperlink, wird display : none aufgehoben und der Tooltipp erscheint. Vergleichbar mit einem gewöhnlichen Hover-Effekt zur Veränderung der Linkfarbe, wie wir ihn überall verwenden. Die Formatierung eines Links: <div id="link"><a href="#">Link<span>Mein Text als Fensterchen.</span></a></div> Was zwischen <span></span> integriert ist, wird mit Hilfe einer Format-Anweisung unsichtbar gemacht: div#link a span {display: none;} Erscheint der Cursor auf dem Link, wird die Formatierung mit a:hover geändert und der Tooltipp mit einem Layer zum Leben erweckt: div#link a:hover span {display:block; text-decoration:none; position: absolute; top: 10px; left: 100; width: 200px; padding: 5px; margin: 4px; z-index: 100; color:blue; background:silver;} Größe und Position kann hierbei frei festgelegt werden (einfach ein wenig ausprobieren!). Auch können Textformat und Farbformat individuell angepasst werden. Ebenso ist ein feiner Rahmen mit: border : 1px solid black möglich. Ein entsprechender Quellcode könnte sich wie nachfolgend darstellen: <html><head><title>Meine erste css-Seite</title><style type="text/css"><!-- div#link {position: absolute; }div#link a {display: block; color: green; font-weight: bold; font-size: 12px; }div#link a:hover {background: red; }div#link a span {display: none;}div#link a:hover span {display: block; text-decoration : none; position: absolute; top: 10px; left: 100; width: 200px; padding: 5px; margin: 4px; z-index: 100; color: blue; background: silver;}--></style></head><body><div id="link"><a href="#">Link<span>Zusatztext als PopUp.</span></a></div></body></html>
