Tooltip mit CSS

Mit CSS ist es ganz einfach einen Tool-Tip beim Überfahren eines Links oder Bildes anzuzeigen. Dazu muss nur in der CSS-Datei eine neue Klasse angelegt werden.


Der Hyperlink sieht folgendermaßen aus:

Einfach den Link mit der Maus überfahren:<br />
<a href=“http://www.pixelschubzzer.de“ class=“tooltip“>www.pixelschubzzer.de<span>
<img src=“tooltip.jpg“ border=“0″ style=“float: left; margin: 10px;“ /><br />
Besuch das Blog vom pixelschubzzer. Da gibt es interessante Sachen zu sehen!</span></a> <br /><br />So kann man weiterführende Hinweise unterbringen.

Die dazugehörige CSS-Klasse:


a.tooltip{
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFFFCC;
text-decoration: none;
z-index: 98;
}

a.tooltip span{
display: none;
}

a.tooltip:hover span{
display: block;
background-color: #666666;
position: absolute;
padding: 20px;
top: 2em;
left: 5em;
width: 20em;
border: 1px dotted #ffffff;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
letter-spacing: 1px;
color: #ffffff;
}

Kommentar (1) Schreibe einen Kommentar

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.