Loading...   Upload Image

CSS TooltipTutorials » Html/Css Tutorials » CSS Tooltip

Verfasst von Alice am 14.08.2009 - wurde schon 16496 mal gelesen

Kategorie: Html/Css
Bewertung:
8x bewertet
Schwierigkeit: einfach
Kommentare: [ 3 ]

Tag - Schlagwort Tooltip Tag - Schlagwort CSS

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;
}


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 ...


       ALL-INKL.COM - Webhosting Server Hosting Domain Provider