Anzeige
Tutorialbeschreibung

jQuery - Tooltips - Teil 01

jQuery - Tooltips - Teil 01

Mit jQuery lassen sich erstklassige Tooltips aufbauen. Solche Tooltips sind in erster Linie dafür da, Zusatzinformationen zu Bildern, Links, Formularfeldern usw. zu liefern. Angezeigt werden diese Informationen dann, wenn mit dem Mauszeiger über den entsprechenden Bereich gefahren wird. In diesem und den nächsten Tutorials geht es um die verschiedenen Tooltip-Aspekte. Aber noch etwas anderes lernen Sie kennen: den Einsatz der jQuery Tools. Zunächst hier anhand der Tooltips, später auch in Verbindung mit anderen Dingen.


Im einfachsten Fall generiert man Tooltips über die folgende HTML-Syntax.

<a href="http://www.psd-tutorials.de/" title="Photoshop – Flash – Cinema4D">PSD-Tutorials.de</a>

Das funktioniert in dieser Form durchaus.
[Beispiel anzeigen]

Bilder



Durch das title-Attribut können beliebigen HTML-Elementen Zusatzinformationen zugewiesen werden. Diese Variante hat allerdings einen entscheidenden Nachteil: Wirklichen Einfluss darauf, wie das Tooltip-Fenster letztendlich dargestellt wird, hat man nicht. Denn für die Darstellung sind einzig und allein die Browser zuständig.


 

CSS für Tooltips

Eine Alternative zur der gezeigten title-Variante ist eine CSS-basierte Lösung. Eine solche Anwendung lässt sich ebenfalls sehr einfach umsetzen. Hier zunächst die entsprechende HTML-Syntax:
Das ist ein <a href="#" class="tooltip">Tooltip.<span>Umgesetzt wurde das auf CSS-Basis.</span></a>

Wie Sie sehen, wird hier u.a. ein Hyperlink definiert. Zeigt man mit dem Mauszeiger auf diesen Link, wird der innerhalb des span-Elements angegebene Text in einem Tooltip-Fenster angezeigt. Wie dieses Fenster letztendlich aussieht, wird über herkömmliche CSS-Syntax gesteuert.
<style>
 /* <![CDATA[ */
 a:hover {
 background:#fff; 
 text-decoration:none;
 } 
 a.tooltip span {
 display:none; 
 padding:3px;
 margin-left:10px; 
 width:150px;
 }
 a.tooltip:hover span {  
 display:inline; 
 position:absolute; 
 border:1px solid #ccc; 
 color:#6c6c6c;}
 /* ]]> */
</style>

 
Entscheidend ist, dass der Inhalt des span-Elements zunächst nicht sichtbar ist. Der darin enthaltene Text wird vielmehr erst angezeigt, wenn das Hover-Ereignis ausgelöst, mit dem Mauszeiger also über den Link gefahren wird.
[Beispiel anzeigen]

Bilder



 

Tooltips mit den jQuery Tools

Nun wäre jQuery nicht jQuery, wenn das Framework nicht auch auf dem Tooltip-Gebiet etwas zu bieten hätte. Und in der Tat gibt es zahlreiche Plug-ins, mit denen sich Tooltips realisieren lassen. Eine sehr interessante Möglichkeit hierzu bieten die jQuery Tools. Mit diesen Tools kann man seine Webseite gehörig aufpeppen. Dazu gehören beispielsweise Interface-Effekte und –Elemente. Was diese jQuery Tools alles leisten können, werden Sie in weiteren Tutorials erfahren. Zunächst geht es aber darum, wie sich diese für Tooltips nutzen lassen. Denn diese Tooltips haben es tatsächlich in sich. Sie lassen sich nämlich nicht nur mit Effekten ausstatten, auch sonst werden allerlei Optionen geboten. Dank derer lassen sich die Tooltips tatsächlich an die eigenen Erfordernisse bzw. an die eigene Webseite anpassen.

Die jQuery-Tools stehen unter den beiden Open-Source-Lizenzen GPL2 und MIT, können also für eigene Projekte genutzt werden. Die offizielle Projektwebseite der jQuery-Tools finden Sie unter http://flowplayer.org/tools/index.html.

Bilder



 
Dort gibt es eine Dokumentation und einige Beispiele. An dieser Stelle geht es aber zunächst darum, wie Sie die jQuery-Tools einsetzen können. Im einfachsten Fall verwenden Sie den folgenden Aufruf im head-Bereich Ihrer Seite:
<script src="http://cdn.jquerytools.org/1.2.0/jquery.tools.min.js"></script>

Dadurch werden die folgenden Elemente geladen:
  • jQuery 1.4.2
  • Tabs
  • Tooltip
  • Scrollable
  • Overlay

Das hat den Vorteil, dass man auf diese Weise gleich auf alle Eventualitäten vorbereitet ist. Allerdings geht ein solches Gesamtpaket natürlich auch immer auf Kosten der Performance. Wenn Sie also – wie im vorliegenden Fall – zunächst ausschließlich die Tooltip-Funktionalität nutzen wollen, können Sie das Downloadpaket selbst schnüren. Rufen Sie dazu die Seite http://flowplayer.org/tools/download/index.html auf.

Bilder



 
Interessant ist dort der Bereich Build a custom set of Tools. Aktivieren Sie hier all die Elemente, die Sie benötigen. Über den Download-Link kann die js-Datei heruntergeladen werden. Damit sind die Vorarbeiten abgeschlossen. Binden Sie nun die jQuery-Tools ein.
<script src="http://cdn.jquerytools.org/1.2.0/jquery.tools.min.js"></script>

Anschließend geht es an die Definition des eigentlichen HTML-Bereichs. Im folgenden Beispiel wird von vier Grafiken ausgegangen, die jeweils mit einem Tooltip versehen werden sollen.
<div id="bilder"> 
     <img src="bild1.jpg" title="Das erste Bild"/> 
     <img src="bild2.jpg" title="Das zweite Bild"/> 
     <img src="bild3.jpg" title="Das dritte Bild"/> 
     <img src="bild4.jpg" title="Das vierte Bild"/> 
 </div>

Die Werte der title-Attribute werden standardmäßig oberhalb der Bilder angezeigt. Diese Position lässt sich manuell ändern. Dazu aber später mehr. Zunächst die einfachste Variante.
<style type="text/css">
 /* <![CDATA[ */
 .tooltip{ 
     display:none; 
     font-size:16px; 
     color:#000;    
 }
 /* ]]> *
 </style>

Der Klassenname tooltip wurde hier übrigens nicht rein zufällig vergeben. Denn die jQuery-Tools generieren das Tooltip-Element automatisch und weisen ihm die CSS-Klasse tooltip zu.


 
Was jetzt noch fehlt, ist die eigentliche Skriptfunktionalität. Wie Sie das von der Arbeit mit jQuery her gewohnt sind, lässt sich diese sehr einfach nutzen.
<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function() { 
     $("#bilder img[title]").tooltip(); 
 }); 
 /* ]]> */
</script>

Das ist die denkbar einfachste Variante einer Tooltip-Definition.
[Beispiel anzeigen]

Bilder



Optisch ansprechend ist das freilich noch nicht. Besser ist es daher, wenn die Tooltips mit entsprechenden Grafiken gestaltet werden. Diese können Sie selbst gestalten.


 
Ebenso werden aber auch einige vordefinierte Grafiken von den Entwicklern der jQuery-Tools angeboten. Zu finden sind diese auf der Seite http://flowplayer.org/tools/tooltip/index.html. Sie können sich diese entweder einzeln oder als Gesamtpaket in Form eines Zip-Archivs herunterladen.

Bilder



Laden Sie sich von dort die entsprechende Grafik herunter. Am eigentlichen Skript muss nichts verändert werden. Anpassungen werden lediglich im CSS-Bereich nötig. Der könnte nun folgendermaßen aussehen:
<style type="text/css">
 /* <![CDATA[ */
 .tooltip {
       display:none;
       background:transparent url(black_arrow.png);
       font-size:12px;
       height:70px;
       width:160px;
       padding:25px;
       color:#fff;      
 }
 /* ]]> */
</style>

 
In diesem Beispiel wird über die background-Eigenschaft die zuvor heruntergeladene Grafik black_arrow.png eingebunden. Beachten Sie, dass diese Grafik im aktuellen Beispiel im gleichen Verzeichnis wie die HTML-Datei liegt. Ein abschließender Blick in den Browser zeigt, dass die Grafik wie gewünscht angezeigt wird.
[Beispiel anzeigen]

Bilder



Dieses Beispiel macht deutlich, wie einfach sich durchaus ansprechende Tooltips erstellen lassen.


 
Am Ende dieses ersten Tutorials zu den jQuery-Tools noch ein kleiner Ausblick darauf, wie leistungsfähig diese "Werkzeugkiste" (nicht nur) hinsichtlich der Tooltips tatsächlich ist. Standardmäßig werden die Tooltips oberhalb der Elemente angezeigt. Dieses Verhalten lässt sich ganz einfach anpassen. Dazu wird einfach die gewünschte Position übergeben.
<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function() {
     $("#bilder img[title]").tooltip({position: "bottom center"});
 }); 
 /* ]]> */
 </script>

In diesem Beispiel wurde bottom center übergeben.
[Beispiel anzeigen]

Bilder



Dadurch werden die Tooltips nun unterhalb der Elemente angezeigt. Diese und zahlreiche andere Optionen werden in weiteren Tutorials ausführlich vorgestellt.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von reteprhus
  • 24.06.2010 - 00:09

Top Beschreibung ! Danke!

Portrait von Zahnerer
  • 07.06.2010 - 15:55

Dieses Tutorial öffnet einem die Augen, was man alles machen kann. Ich freue mich schon auf die kommenden Teile! Weiter so!

Portrait von dlogic
  • 04.06.2010 - 11:28

jQuery - entdecke die Möglichkeiten ;-) ... interessantes Tutorial

Portrait von ralfi966
  • 01.06.2010 - 07:46

Sehr aufschlussreiches TUT , danke!

Portrait von lustig
  • 29.05.2010 - 17:08

Gute Beschreibung der Möglichkeit, Tooltipps über jQuery zu realisieren.

x
×
×