Irgendwo von Dr. Web:
Tooltipps mit CSS
Den Tooltipp kennen Sie - wird ein Seitenelement berührt, öffnet sich ein zartgelbes Fensterchen mit weiteren Informationen. Etwas Ähnliches, nur mit erheblich erweiterten Möglichkeiten, können wir selbst bauen. Dazu nutzen wir CSS - und zwar im Speziellen den Hover-Effekt. Javascript ist nicht im Spiel.
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.
Und das soll ohne Javascript funktionieren? Das tut es. Im Prinzip machen wir folgendes: Der Tooltipp befindet sich bereits auf der Seite, er wird jedoch nicht angezeigt, da wir mit display:none seine Anzeige unterdrücken. Der Tooltipp selbst befindet sich innerhalb eines Layers, so können wir ihn beliebig positionieren, ohne Rücksicht auf vorhandene Inhalte nehmen zu müssen.
Verirrt sich nun ein Mauszeiger auf unserem Hyperlink, wird display : none aufgehoben und der Tooltipp angezeigt. Das ist im Prinzip nichts anderes, als ein gewöhnlicher Hover-Effekt zur Veränderung der Linkfarbe, wie er täglich überall verwendet wird. Die Sache ist nur geringfügig komplizierter.
Die Formatierung eines Links
<div id="link">
<a href="#">Link<span>Zusatztext als PopUp.</span></a>
</div>
Was zwischen <span></span> eingebettet wurde, wird über eine Formatanweisung unsichtbar gemacht:
div#link a span {display: none;}
Sobald nun der Cursor auf dem Link erscheint, wird mit a:hover die Formatierung geändert und der Tooltipp mit einem Layer zum Leben erweckt:
div#link a:hover span
{display:block; text-decoration:none; position: absolute; top: 40px; left: 0; width: 140px; padding: 5px; margin: 4px; z-index: 100; color:black; background:yellow;}
Größe und Position können Sie wie oben frei festlegen. Text- und Farbformate können nach Belieben angepasst werden. Ebenso ein feiner Rahmen mit 'border : 1px solid black".
Der komplette Quellcode für eine Seite stellt sich so dar:
Code:
<html>
<head>
<title>Tooltipp mit CSS</title>
<style type="text/css">
<!--
div#link {position: absolute; }
div#link a {display: block;}
div#link a:hover {background: white; }
div#link a span {display: none;}
div#link a:hover span {display: block; text-decoration : none;
position: absolute; top: 40px; left: 0; width: 140px;
padding: 5px; margin: 4px; z-index: 100; color: black; background: yellow;}
-->
</style>
</head><body>
<div id="link">
<a href="#">Link<span>Zusatztext als PopUp.</span></a></div>
</body>
</html>
Es ist problemlos möglich, mehrere solche Anweisungen auf einer Seite unterzubringen. Die Sache eignet sich also auch für Menüleisten. Zur Anzeige ist ein moderner Browser erforderlich.
