Tooltip-Fenster mit CSS:
Tooltip-Fenster können wir für Infos verwenden, die bei Mauskontakt erscheinen.
Im Tooltip-Fenster können wir beliebigen HTML-Code ausführen lassen.
Tooltipp-Fenster ohne Javascript :
Folgenden CSS-Code Einfügen im Feld "Text über Design"
<style type="text/css">
<!--
/* Text, der berührt werden soll */
.info {
font-size: 14px;
color: chocolate;
border-bottom: 1px dashed chocolate;
text-decoration: none;
cursor: help; }
/* Tooltip Fenster */
.info span {
position: absolute;
width: 200px;
color: #FFFFFF;
padding: 10px 10px 10px 20px;
margin-top: -30px;
background-color: #c0513e;
border-radius: 15px 15px 15px 0px;
box-shadow: 1px 1px 10px #aaaaaa;
visibility: hidden; }
/* span text bei Mauskontakt sichtbar */
.info:hover span { visibility: visible; }
-->
</style>
Im Seiteninhalt, oder in der rechten Box könnn wir nun Texte oder Bilder mit einem Tooltip-Fenster ausstatten. Beispiel für Text mit Tooltip:
<a class="info">TEXT<span>Tooltip-Inhalt</span></a>
Oder Bild mit Tooltip:
<a class="info"><img src="BILD-URL" alt="" border="0"> <span>Tooltip-Inhalt</span> </a>
Zwischen <span> und </span> kommt der Inhalt für das Tooltip hinein.
Wenn das Tooltip-Fenster eine Grafik enthalten soll , wird dort <img src=" Grafikadresse" alt=""> eingefügt.
|
