Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Ajax / Javascript Tutorial: Tool Tip mit Hilfe von Jquery - Basics



Ranking: +1   Kommentare: 0   |   Bewertung: Keine Berechtigung!  

Jquery Tool Tip - Basics



Tool Tips werden in der Regel benutzt um usability einer Website zu steigern. Sehr populaer sind sie in Navigation Design, aber auch als hilfestellungen, z.B. in Formularen.

Dies ist kein Jquery Tutorial - also wenn ihr keine Jquery Erfahrung habt, solltet ihr euch vielleicht erstmal reinlesen. Ansonsten basiert das Tutorial natuerlich auch auf HTML und CSS.




HTML/CSS



Jeder Tool Tip braucht ein Trigger Element, also ein HTML Element was durch eine User Action den Tool Tip aktiviert. Meistens sind dies Links (Navigation), kann aber im Prinzip alles mögliche sein; Div's, Listen, Text, Bilder etc. Das Trigger Element beinhaltet normalerweise auch den Content des Tool Tips, dies muss aber nicht sein. (mehr dazu später)

Code:




<a href="#" class="trigger" rel="Tool Tip Text">Tool Tip Trigger</a>




Wir geben dem Link eine Class und sogleich nutzen wir das rel Tag als Speicherort fuer unseren Content.

Code:




a.trigger{

font-size:12px;

color:#3e3e3e;

position:relative;

}




Dann geben wir dem link ein paar styles. Dieses Tutorial befasst sich nicht mit Gestaltung, aber man kann sehr Kreativ sein bei Tool Tip Design. Es gibt auch super Showcases wo man sich Inspirieren lassen kann.

Der wichtigste Punkt bei dieser CSS Erklärung ist position:relative;. Die relative Definition wird uns später den Tool Tip relative zu unserem Trigger positionieren lassen.

Code:




div.tool_tip{

width:150px;

background-color:#eeeeee;

border:solid 1px #e0e0e0;

position:absolute;

margin-left:-75px;

left:50%;

}




Als nächstes definieren wir die Tool Tip Div die wir später dynamisch erzeugen werden. Hier ist euch wieder Freiraum überlassen, bitte aber position:absolute; beachten. Da wir unseren Tool Tip relativ zum Trigger positionieren, muss die div als position:absolute; gesetzt werden.

In diesem Tutorial werde ich den Tool Tip unter dem Trigger zentrieren. Wir geben dem Tool Tip Left:50%; und dann auch noch eine margin-left:-75px; (150/2). Somit ist der Tip Direkt unter dem Trigger zentriert.

Jquery


Jetzt koennen wir anfangen unsere Events zu coden die den Tool Tip aktivieren werden.

Included eure Lieblings Jquery Version und schmeisst auch gleich noch ein paar script tags dazu.
Ihr könnt selbstverständlich auch eine lokale Version verwenden

Code:


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">





</script>


In diesem Tutorial werde ich mein Code in-line schreiben, aber normalerweise würde man natürlich eine externe Datei hinzufügen.

Code:




$(document).ready(function(){



    $('a.trigger').hover(function(){

    

        var tool_tip = '<div class="tool_tip"></div>';

        var content = $(this).attr('rel');

        

        $(this).append(tool_tip);

        $('div.tool_tip').text(content);

        

    },function(){

    

        $('div.tool_tip').remove();

    

    });



});



Wir fangen an mit der document ready Funktion und platzieren den Tool Tip Code dazwischen. Ihr könnt natürlich auch Eure eigenen Funktionen bauen, aber für diesen Zweck reicht das.

Als nächstes definieren wir unseren event handler hover und verlinken ihn mit unserem Trigger Element - a.trigger.

Code:




$('a.trigger').hover(function(){

    

        //Hover Event

        

},function(){

    

        //MouseOut Event

    

});




Nun setzen wir Zwei Variablen, tool_tip und content.
tool_tip speichert unseren Tool Tip html code, in diesem Beispiel ist unser Tool Tip einfach nur eine Div. Man kann aber natürlich viel, viel weiter gehen und sehr komplexe Tips basteln. (mehr dazu später).

Code:




$('a.trigger').hover(function(){

    

        //Hover Event

    var tool_tip = '<div class="tool_tip"></div>';

    var content = $(this).attr('rel');    



},function(){

    

        //MouseOut Event

    

});




content speichert den Inhalt, also was auch immer als rel="" gesetzt wurde.

Danach wird unser Tool Tip ganz einfach mit append() reingesetzt und der Content mit text() gesetzt.

Code:




$('a.trigger').hover(function(){

    

        //Hover Event

    var tool_tip = '<div class="tool_tip"></div>';

    var content = $(this).attr('rel');    



       $(this).append(tool_tip);

       $('div.tool_tip').text(content);



},function(){

    

        //MouseOut Event

    

});







Zum Schluss müssen wir natürlich auch ein MouseOut event definieren. Hier wird der Tool Tip einfach removed.

Code:






$('a.trigger').hover(function(){

    

        var tool_tip = '<div class="tool_tip"></div>';

        var content = $(this).attr('rel');

        

        $(this).append(tool_tip);

        $('div.tool_tip').text(content);

        

    },function(){

               

        $('div.tool_tip').remove();

    

    });






Und das war's eigentlich. Dies ist Natürlich ein sehr sehr simpler Tip, aber man kann mit diesem Grundprinzip sehr weit kommen.

Tip:
Manche Browser, z.B. Firefox, verwenden Interne Tool Tips, aber nur wenn title="" im link gesetzt wurde. Dies sollte man vermeiden wenn man seinen eigenen Tool Tip baut. Deswegen bevorzuge ich auch das rel tag und nicht das title tag.

Andere Verwendungen


Image Previews - Grösseren Thumbnail anzeigen etc.
Datenbanken auslesen mit Hilfe von Ajax und extra infos anzeigen.


Die Möglichkeiten sind riesig und ist nur von eurer Kreativität abhängig

Kompletter Code


Code:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>Tool Tip</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">



$(document).ready(function(){



    $('a.trigger').hover(function(){

    

        var tool_tip = '<div class="tool_tip"></div>';

        var content = $(this).attr('rel');

        

        $(this).append(tool_tip);

        $('div.tool_tip').text(content);

        

    },function(){

    

        $('div.tool_tip').remove();

    

    });



});





</script>



<style>



a.trigger{

margin-left:300px;

font-size:12px;

color:#3e3e3e;

position:relative;

}



div.tool_tip{

width:150px;

background-color:#eeeeee;

border:solid 1px #e0e0e0;

position:absolute;

left:50%;

margin-left:-75px;

}



</style>    

</head>

<body>



    <a class="trigger" rel="Tool Tip text">Tool Tip</a>



</body>

</html>








Veröffentlicht von: dbrandt
Veröffentlicht am: 11 Sep. 2011
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: aber als auch Basics[/h3] benutzt der design einer [h3]Jquery hilfestellungen in navigation populaer Regel Sehr sie sind steigern Tip Tips tool um usability Website werden z.B. zu


Themenverwandte Tutorials


Kommentar(e) (0)


Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder