Verfasst von Alice am 14.08.2009 - wurde schon 16754 mal gelesen
Tooltip CSS
CSS TooltipTutorials » Html/Css Tutorials » CSS Tooltip
CSS Tooltip - Tutorial
Es wurde ein Tutorial gewuenscht, dass erklaert wie man solche Tooltips erstellt, wie hier auf Alice-Grafixx.de im Einsatz sind ...Gleich vorweg, hier auf Alice-Grafixx werden die Tooltips mittels JavaScript framework MooTools erstellt, aber man braucht keine maechtiges Framework, um so kleine handliche Toolips zu erzeugen, dazu reichen ein paar Zeilen CSS schon aus.
CSS Tooltip Beispiel anschauen
Folgenen Code bitte als tooltip.css speichern...
a.tooltip{
position: relative;
z-index: 20;
color: #000;
text-decoration: underline;
}
a.tooltip:hover{
z-index: 25;
}
a.tooltip span{ /* Span Element nicht anzeigen */
display: none;
}
a.tooltip:hover span{ /* Span Element nur angezeigt beim Ueberfahren mit der Maus */
background: #505050; /* Hintergrundbild */
display: block; /* macht aus dem Inlineelement ein Blockelement */
position: absolute;
top: 1.8em; /* abstand von oben */
left: 1.8em; /* abstand von links */
width: 15em; /* breite */
padding: 3px 7px; /* Innenabstand */
border: 1px solid #ccc; /* Rahmenfarbe */
color: #fff; /* Textfarbe */
text-align: left; /* Textausrichtung */
}
a.tooltip:hover span strong{
color: #AC93C8;
}
position: relative;
z-index: 20;
color: #000;
text-decoration: underline;
}
a.tooltip:hover{
z-index: 25;
}
a.tooltip span{ /* Span Element nicht anzeigen */
display: none;
}
a.tooltip:hover span{ /* Span Element nur angezeigt beim Ueberfahren mit der Maus */
background: #505050; /* Hintergrundbild */
display: block; /* macht aus dem Inlineelement ein Blockelement */
position: absolute;
top: 1.8em; /* abstand von oben */
left: 1.8em; /* abstand von links */
width: 15em; /* breite */
padding: 3px 7px; /* Innenabstand */
border: 1px solid #ccc; /* Rahmenfarbe */
color: #fff; /* Textfarbe */
text-align: left; /* Textausrichtung */
}
a.tooltip:hover span strong{
color: #AC93C8;
}
Die tooltip.css sollte mittels
<link rel="stylesheet" type="text/css" href="tooltip.css" />
in den Head-Bereich, also zwischen <head> und </head>, in die Seite eingebunden werden ...
Pfadangabe zur tooltip.css muss u.U. angepasst werden!
Jeder Link, der nun mit einem Tooltip ausgestattet werden soll, muss mit dem Attribut class="tooltip" beglueckt werden und der Text, welcher im Tooltip stehen soll, packen wir in einen Span-Tag ...
<a href="http://url.de" class="tooltip">LINK Text<span>Tooltip Text</span></a>
Man kann auch ein Bild als Tooltip anzeigen lassen
<a href="http://url.de" class="tooltip">LINK Text<span><img src="bild.jpg" alt="" /></span></a>
Beispieldateien herunterladen
Kommentar schreibenHinterlasse einen Kommentar
Du musst angemeldet sein, um einen Kommentar zu hinterlassen...
Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...
