jQuery TOOLS – Tooltip

Wie versprochen hier der erste Teil der jQuery TOOLS Serie.

Tooltip, ein sehr wichtiges Element auf einer Website, meiner Meinung nach wird es von vielen Designer noch nicht wirklich beachtet. Doch es ist verdammt mächtig und wichtig. Hier ein paar Beispiele wie man dies mit jQuery TOOLS einbindet.

Beachte bitte du brauchst für die Beispiele folgende Libs: Download der Libs

Allgemein:
Binde folgenden Code in dein CSS ein:

div.tooltip {
    background-color:#000;
    border:1px solid #fff;
    padding:10px 15px;
    width:200px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px; 

    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}

Und irgendwo in deinem HTML Code – am besten ganz oben oder ganz unten.

So – somit haben wir die Tooltip box, was jetzt noch fehlt ist der JS Teil.

Ganz simple Referenz auf die Style-Class tooltip und wir wollen die Box rechts von einem Input Feld haben, wichtig ist das du im Inputfeld einen Title eingibst, sonst wird natürlich nichts angezeigt.

$("input[title!='']").tooltip({
            position: "center right",
            offset: [1, 10],
            effect: "fade",
            opacity: 0.7,
            tip: '.tooltip'
        });

Was macht da jetzt was?

1) position:
gibt an wo es angezeigt werden kann

2) offset:
ist zum Feintuning – für die position, param(von oben, von links)

3) effekt:
Es gibt verschiedene effekte wie es angzeigt werden soll zb. Slide, Fade etc, man kann auch eigene schreiben, habe ich noch nicht gemacht. Falls du mehr darüber wissen willst.

4) opacity:
Transparentwert vom Tooltip.

5) tip:
Referenz auf den Container vom Tooltip

Wenn du diese paar Punkte kapiert hast, weißt du im Grunde alles was man wissen muss. Du kannst dies natürlich bei jedem Element einbinden, wichtig ist wirklich vergiss nicht auf den Title und hier noch ein Tip von mir – die Lib löscht den Tooltip aus dem Element, sprich wenn du ihn im Quellcode dann suchst, ist der Title weg.

Was ist noch interessant?

1) Event
Die jQuery TOOLS haben ein eigenes Eventmanagment, ist aber eh ganz simple so wie in jQuery selbst. Hier ein kleines Beispiel:

$("input").tooltip({
    events: {
        input: 'click, blur, focus',
        checkbox: 'mouseover click, mouseout',
        date: 'click, blur'
    }
});

der Eventkey reagiert auf den Input Type – sprich wie input, checkbox, date etc.