Anzeige
Tutorialbeschreibung

jQuery - Tooltips - Teil 02

jQuery - Tooltips - Teil 02

Der Einstieg in die Welt der jQuery-Tools wurde im ersten Tutorial anhand der Tooltips gezeigt. In diesem Zusammenhang wurde auch bereits darauf hingewiesen, dass sich die Tooltips mit allerlei zusätzlichen Optionen konfigurieren lassen. Welche es gibt und wie Sie mit denen noch ansprechendere Tooltips erstellen können, wird in diesem Tutorial beschrieben. Sie erfahren hier unter anderem, wie sich die Tooltips konfigurieren und mit HTML-Syntax aufpeppen lassen.


Um die Tooltips zu konfigurieren, weist man der tooltip()-Methode die entsprechenden Eigenschaften und Werte zu.
[Beispiel anzeigen]

<script type="text/javascript">

 /* <![CDATA[ */

  $(document).ready(function() { 

     $("#bilder img[title]").tooltip({position: 'bottom left ', opacity: 0.8}); 

 }); 

 /* ]]> */

</script>

In diesem Beispiel wurden die beiden Eigenschaften position und opacity verwendet, mit denen Sie es wahrscheinlich am häufigsten zu tun bekommen. Über position legt man die Position des Tooltip-Fensters fest. Als Wert weist man die gewünschte Position zu. Im aktuellen Beispiel wird über bottom left bestimmt, dass das Tooltip links unterhalb des eigentlichen Elements angezeigt wird. Insgesamt gibt es die folgenden Varianten:
  • top left
  • top center
  • top right
  • center right
  • bottom right
  • bottom center
  • bottom left
  • center left

Über opacity legt man die Transparenz des Tooltips fest. Der Standardwert ist 1, was gleichbedeutend mit keiner Transparenz ist. 0 bedeutet unsichtbar. Durch 0.5 wird beispielsweise festgelegt, dass 50% des Tooltips sichtbar sind.


 
Neben den bereits vorgestellten Konfigurationsoptionen gibt es noch zahlreiche andere. Am interessantesten dürfte hier sicherlich effect sein. Darüber lassen sich die Tooltips mit Effekten ausstatten. So kann man beispielsweise bestimmen, wie und in welcher Richtung die Tooltips eingeblendet werden.
[Beispiel anzeigen]
<script type="text/javascript">
 /* <![CDATA[ */
  $(document).ready(function() { 
     $("#bilder img[title]").tooltip({effect: 'fade'}); 
 }); 
 /* ]]> */
</script>

Standardmäßig wird bei effect der Wert toggle angenommen. Darüber lässt sich ein einfaches Ein- und Ausblenden realisieren. Mit diesem Ein- und Ausblenden müssen Sie sich allerdings nicht zufriedengeben. Denn lädt man zusätzlich bei den jQuery-Tools die Slide effects, kann man den Slide-Effekt nutzen.

Der Slide-Effekt lässt sich sehr einfach einsetzen. Dazu weist man der tooltip()-Methode die Eigenschaft effect mit dem dazugehörenden Wert slide zu. Im einfachsten Fall sieht der Einsatz von slide also folgendermaßen aus:
[Beispiel anzeigen]
<script type="text/javascript">

 /* <![CDATA[ */

  $(document).ready(function() { 

     $("#bilder img[title]").tooltip({effect: 'slide'}); 

 }); 

 /* ]]> */

</script>

 
Der Slide-Effekt kann allerdings noch detaillierter beschrieben werden. Denn die jQuery-Tools stellen dafür zahlreiche Konfigurationsoptionen zur Verfügung. Hier die wichtigsten:
  • direction – Darüber wird festgelegt, in welche Richtung der Slide-Effekt angewendet werden soll. Mögliche Werte sind left, right, up und down.
  • slideOffset – Hiermit lässt sich festlegen, wie weit das Tooltip-Fenster im Vergleich zum eigentlichen Element verschoben werden soll. Ein positiver Wert bedeutet, dass das Tooltip-Fenster weiter nach oben/links verschoben wird. Durch einen negativen Wert wird das Fenster weiter nach unten/rechts verschoben.
  • slideInSpeed – Die Geschwindigkeit in Millisekunden, in der das Tooltip angezeigt werden soll.
  • slideOutSpeed – Hier wird die Angabe der Geschwindigkeit in Millisekunden erwartet, in der das Tooltip ausgeblendet wird.

Um mehrere Optionen parallel zu verwenden, geben Sie diese durch Kommata getrennt voneinander an.
[Beispiel anzeigen]
<script type="text/javascript">

 /* <![CDATA[ */

  $(document).ready(function() { 

     $("#bilder img[title]").tooltip({

             effect: 'slide', 

             direction: 'up', 

             slideOffset: -140}); 

 }); 

 /* ]]> */

</script>

 

Die Tooltips gestalten

Bei der Gestaltung der Tooltips haben Sie weitestgehend freie Hand. Denn tatsächlich können Sie die Tooltips mit beliebigen HTML-Elementen ausstatten. Das ist äußerst praktisch, schließlich lassen sich so die Tooltips noch weiter personalisieren. Wie sich ein solches HTML-Tooltip umsetzen lässt, zeigt das folgende Beispiel. Zunächst das eigentliche Skript:
<script type="text/javascript">

 /* <![CDATA[ */

  $(document).ready(function() {

  

 $("#bilder").tooltip({ effect: 'slide', position: 'bottom center'});

 });

 /* ]]> */

</script>

Beachten Sie, dass hier nun nicht mehr wie bislang auf das title-Attribut des img-Elements zugegriffen wird. Hier noch einmal zum Vergleich die bisher verwendete Syntax:
<script type="text/javascript">

 /* <![CDATA[ */

  $(document).ready(function() { 

     $("#bilder img[title]").tooltip({effect: 'slide'}); 

 }); 

 /* ]]> */

 </script>

 
Wie Sie sehen, wurde dort das title-Element als Quelle für das Tooltip-Fenster genommen. Das soll sich nun ändern. Dennoch ist auch hier natürlich wieder ein wenig CSS nötig.
<style type="text/css">

 /* <![CDATA[ */

 .tooltip {

     display:none;

     background:#eee;

     font-size:12px;

     padding:25px;

     color:#fff;

 }

 /* ]]> */

</style>

 
Weiter geht es mit der Definition des Bildes. Wird über dieses Bild mit dem Mauszeiger gefahren, blendet dies das Tooltip-Fenster ein. Entscheidend ist, dass dieses Bild noch vor dem Inhalt des Tooltips definiert wird. Hält man diese Reihenfolge nicht ein, führt das zu einer Fehlermeldung:

Bilder



 
Definieren Sie daher zunächst das eigentliche Element.
<div id="bilder">

 <img src="bild1.jpg" />

</div>

Erst danach wird der Inhalt des Tooltip-Fensters beschrieben. Im folgenden Beispiel wird eine einfache HTML-Tabelle verwendet. In dieser Tabelle sind neben Text auch einige Bilder enthalten:
<div class="tooltip">

   <table border="2">

     <tr>

       <td><img src="https://downloads.psd-tutorials.de/_membertutorials/3273-small.gif" /></td>

       <td>Feuerwerk freistellen mit Photoshop

         05.05.2010 -  - von Matthias für Photoshop </td>

     </tr>

     <tr>

       <td><img src="https://downloads.psd-tutorials.de/_membertutorials/3272-small.gif" /></td>

       <td>Kinderfotografie - Teil 10: Kinderfotos archivieren, bearbeiten und präsentieren

         04.05.2010 -  - von Jens_Brueggemann für Fotografie </td>

     </tr>

   </table>

</div>

 
Dieses Beispiel zeigt, wie einfach sich HTML-Elemente in die Tooltips einbinden lassen.
[Beispiel anzeigen]

Bilder



 

Die Anzeigedauer bestimmen

Gerade dann, wenn Sie sehr viel Text in die Tooltips einfügen, sollten Sie dafür sorgen, dass die Fenster etwas länger angezeigt werden. Verlässt man nämlich das Bild mit dem Mauszeiger, wird das Tooltip standardmäßig nach 30 Millisekunden ausgeblendet. Dieses Verhalten lässt sich ändern. Weisen Sie dazu tooltip() die Eigenschaft delay zu. Als Wert wird eine Angabe in Millisekunden erwartet. Eine entsprechende Definition könnte also folgendermaßen aussehen:
[Beispiel anzeigen]
<script type="text/javascript">

 /* <![CDATA[ */

  $(document).ready(function() { 

 $("#bilder img[title]").tooltip({ effect: 'slide', position: 'bottom center', delay: 1160});

 });

 /* ]]> */

</script>

In diesem Zusammenhang ist noch eine weitere Konfigurationsoption interessant. Mit predelay können Sie nämlich die Zeit festlegen, die bis zur Anzeige des Tooltips vergehen soll, nachdem mit dem Mauszeiger über den betreffenden Bereich gefahren wurde.
[Beispiel anzeigen]
<script type="text/javascript">

 /* <![CDATA[ */

  $(document).ready(function() {

  

 $("#bilder img[title]").tooltip({ effect: 'slide', position: 'bottom center', delay: 1160, predelay: 1600});

 });

 /* ]]> */

</script>

 
Als Wert erwartet predelay eine Angabe in Millisekunden. Aber Achtung: Setzen Sie diesen Wert nicht zu hoch, da die Besucher ansonsten denken könnten, dass "hier ja überhaupt nichts passiert".


Fazit

Dank der zahlreichen Optionen lassen sich die Tooltips beinahe beliebig konfigurieren. Wo sich Tooltips noch einsetzen lassen, wird im dritten Teil dieser Tutorialserie gezeigt. Dort erfahren Sie dann, wie Sie Formulare und Tabellen mit den Tooltips für die Besucher aufbereiten können.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von BUHL_GPS
  • 07.06.2010 - 08:12

danke, sehr nützlich

Portrait von lustig
  • 04.06.2010 - 20:31

Gute Einführung in die Konfiguration der Tooltipps unter jQuery.

x
×
×