Tooltips stylen
In diesem Tutorial geht es darum, bei Links
die Tooltips anzupassen. Tooltips sind die kleinen Kästen, die auftauchen, wenn man länger auf einem Link hovert und beschreiben, wo dieser Link hinführt. Vor allem bei Icon- oder Bilderlinks werden sie oft verwendet.
Wir machen das, indem wir das title="" Attribut stylen. Anfangs sollte unser Linkhtml so aussehen:
<a href="http://linkurl" title="Linktitel, den wir in dem Tutorial stylen">Euer Link </a>
Ungestylt sieht das ganze so aus:
Um die Tooltips in eurem Stylesheet stylen zu können, müsst ihr euch erst mal
dieses Script als
qTip.js speichern. Dazu einfach alles in den Editor kopieren, die Datei bei Speichern unter... qTip.js nennen und
(Wichtig!) von Textdateien (*.txt) zu alle Dateien (*.*) umstellen, wie beim erstellen von PHP Seiten auch. Ihr könnt außerdem gleich noch X und Y Offset in dieser Datei einstellen. ist aber nicht unbedingt nötig.
Das ladet ihr dann auf euren Server und fügt es mit diesem Code in die Tags ein:
<script language="JavaScript" src="Ordner, in dem das Script ist/qTip.js" type="text/JavaScript"></script>
Nun könnt ihr auch schon mit dem Stylen anfangen! Das macht ihr in eurem Stylesheet mit dem div#qTip { } Tag. Es ist wichtig, dass ihr die Position bei absolute lasst und sicher geht, dass die z-index Zahl die höchste eures Stylesheets ist. Das display:none; ist dafür da, dass das Kästchen nicht angezeigt wird, ohne dass ihr über etwas drüber hovert. So könnte es dann am Ende zum Beispiel aussehen:
div#qTip {
display:none;
z-index:1000;
position:absolute;
padding:3px;
max-width:100px;
text-decoration:none;
font-size:8px;
background-color:#000;
color:#fff;
text-transform:lowercase;
letter-spacing:2px;
font-style:italic; }
Ich hoffe, dass euch das Tutorial geholten hat! ★~(◡‿◕✿)
Wenn etwas unverständlich ist, könnt ihr mir jeder Zeit eine
Frage stellen.
Kommentare
Bisher sind keine Kommentare vorhanden.
