Tooltips mit JavaScript erzeugen - jQuery

0 | 2 Kommentare | 8123 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Tooltips mit JavaScript erzeugen - jQuery" mit Ihrem Wissen!

Anzeige Hier werben

In diesem kleinen Artikel wollen wir mit Hilfe von jQuery eine Tooltip auf Albert Einsteins Zunge legen. Ein Bild von Albert Einstein, das wir für diesen Effekt verwenden, findet man sehr leicht bei Google.

HTML Aufbau:

Als erstes bauen wir uns einen Container, in dem Einstein als Hintergrundbild präsent sein wird. In diesem Container legen wir uns einen weiteren, der später für unseren Tooltip dient. Der <a> Tag dient sozusagen als Anker, der mit Hilfe von CSS genau auf Einsteins Zunge gelegt wird und dann als Tooltip, den ihr mit einem Grafikprogramm eurer Wahl erstellt, erscheinen. Darin wird das im <span> Tag enthaltene Zitat eingeblendet.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Pop-Up Blasen mit jQuery auf Albert Einstein</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    <div id="panel">
        <a href="#" class="moreinfo" id="moreinfo1">
            einstein
            <span class="floatingpanel">Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.</span>
        </a>
    </div>
</body>
</html>
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body {
    font-size: 10px;
    color: #333;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#panel {
    position: relative;
    margin: auto;
    background: transparent url(../img/einstein.jpg) no-repeat left top;
    width: 286px;
    height: 400px;
}

.moreinfo {
    position: absolute;
    display: block;
    text-indent: -1000px;
    text-decoration: none;
    width: 100px;
    height: 80px;
}

#moreinfo1 {
    top: 260px;
    left: 50px;
}

.floatingpanel {
    position: relative;
    display: block;
    width: 108px;
    height: 103px;
    background: transparent url(../img/blase.png) no-repeat left top;
    text-indent: 0px;
    color: #333;
    display: none;
    top: -90px;
    left: -100px;
    padding: 10px 30px 10px 10px;
}

a:hover .floatingpanel {
    display: block;
}

.floatingpanel p {
    margin: 5px 0 0;
    padding: 0;
    color: #333;
}

Da der Eltern Container relativ positioniert ist, sind alle Koordinaten relativ zu links oben des Bildes. Wichtig ist das der Tooltip absolut positioniert wird und eine feste Höhe und Breite zugewiesen bekommt. Der CSS Code ist bereits so aufgebaut, das der Tooltip auch ohne Javascript funktioniert, jedoch ohne schönen visuellen Stil. Aber das holen wir nun nach.

jQuery:

Als erstes muss selbstverständlich die jQuery Library eingebunden werden. Unter www.jquery.org gibt es die aktuelle Version zum Download.

 
HTML
1
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

So, nun können wir uns an den Tooltip Effekt machen. Dafür benötigen wir zwei Events, einen wenn die Maus über die Zunge fährt (mouseover) und einen wenn sie wieder runter fährt (mouseout). Wir müssen auch einige CSS Eigenschaften erstellen, damit der Tooltip ein klein wenig nach unten bewegt wird, bevor er wieder auf die ursprüngliche Position zurückkehrt. Außerdem muss sie verborgen sein, also setzen wir die Deckkraft auf 0 und Anzeige auf "Blockieren".

Wir werden die jQuery Funktion "Animieren" verwenden, um die Deckkraft des Tooltips von 0 (unsichtbar) auf 1 (sichtbar) zu setzen. Damit der Tooltip nicht sofort auftaucht, bauen wir noch einen Verzögerungseffekt ein.

Zu Problemen kann es führen, wenn der Cursor von der Zunge genommen wird und wieder darauf gelegt wird, während die Animation noch läuft. Um dies zu lösen, müssen wir eine Kontrolle hinzufügen, die prüft, ob die Animation noch läuft und wenn, dann den mousover/mouseout Effekt ignoriert.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function(){
    $(".moreinfo").each(function(){
        var t;
        var isanimated = false;
        var isvisible = false;
        var popup = $(".floatingpanel",this);
        $(this).mouseover(function(){
            if(t) clearTimeout(t);
            if(!isvisible&&!isanimated){
                isanimated = true;
                popup.css({opacity:0,display:"block",marginTop:15}).animate({marginTop:0,opacity:1},500,function(){isanimated=false,isvisible=true;});
            }else{
                return;
            }
        }).mouseout(function(){
            if(t) clearTimeout(t);
            if(!isanimated&&isvisible){
                t = setTimeout(function(){isanimated=true;popup.animate({marginTop:-10,opacity:0},500,function(){popup.css({display:"none"});isvisible=false;isanimated=false;});},500);
            }else{
                return;
            }
        });
    });
});

Dieser Code wird im Kopfbereich der HTML Seite eingebunden und somit wäre der jQuery Tooltip fertig.

Ergebnis:

Bild zu Tooltips mit JavaScript erzeugen - jQuery

Das Ergebnis sollte in etwa so aussehen wie auf dem Bild, selbstverständlich ist es noch möglich mehrere Tooltips auf das Bild einzubinden. Deshalb haben wir auch eine CSS Klasse geschaffen und nicht alles in eine ID geschrieben. Aber wie Einstein bereits sagte, lasst eurer Phantasie freien Lauf.

Zusammenfassung:

Arbeiten mit jQuery ist gar nicht schwer, es reichen schon ein paar Zeilen Code um tolle Effekte zaubern zu können. Zudem funktioniert dieser Effekt auch wenn Javascript ausgeschaltet ist, allerdings weit weniger schön. Aber so wird niemand von der Seite ausgeschlossen.

Selbstverständlich gibt es das ganze auch noch als Download, falls sich oben im Code irgendwo ein Fehler eingeschlichen haben sollte.

Downloads

Für diesen Artikel stehen zusätzliche Dateien zum Herunterladen bereit. Der Download ist nur für registrierte Benutzer möglich. Die kostenlose Registrierung dauert nur wenige Sekunden.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "Tooltips mit JavaScript erzeugen - jQuery" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Tooltips mit JavaScript erzeugen - jQuery" hier bearbeiten.

Mitarbeiter

Kommentare: Tooltips mit JavaScript erzeugen - jQuery

Neuen Kommentar schreiben
Invalid
Beantworten

Das HTML dazu ist invalid. Das solltest du ändern...

Benutzer gelöscht am 10.09.2010 um 09:33
Re: Invalid
Beantworten

Danke für die Anmerkung, ist schon gefixt.

Marc Rochow am 10.09.2010 um 12:06