4tens

Tooltips sind eine feine Sache. Sie lassen sich einsetzen, um zusätzliche Informationen zu präsentieren oder um Kontexthilfen anzuzeigen.
Es gibt verschiedene Methoden mittels JavaScript solche Tooltips anzuzeigen. Viele davon nutzen dazu die Title-Attribute im HTML-Tag. Das Title-Attribut ist ja schon von sich aus dazu gedacht, Tooltips anzuzeigen, unterliegt aber verschiedenen Beschränkungen:

• Die Standardtooltips lassen sich nicht mittels CSS in Form bringen
• Die Tooltips werden nicht angezeigt, wenn jemand das Tag mit dem Mauszeiger nicht erreichen kann, oder überhaupt keine Maus benutzt
• Die Tooltips werden nicht wirklich lange angezeigt (Die Ausnahme bildet hier der Opera)
• Längere Texte in Tooltips werden häufig ungünstig umgebrochen oder abgeschnitten

Die genannten Beschränkungen lassen sich umgehen, in dem man den Tooltip mittels JavaScript selbst erzeugt. Hier wird exemplarisch eine Version gezeigt, die mit jquery arbeitet.

HTML (Ausschnitt)

 <a class="useredit" title="Dieser Link öffnet die Bearbeitunsgmaske für Benutzer.
 Dort können die persönlichen Einstellungen des jeweiligen Benutzers geändert werden." href="/edituser/23">
 Benutzer 23 editieren</a>

JavaScript(Ausschnitt)

$(document).ready(function(){

$(".useredit").hover(function(){

    var content = $(this).attr("title");

    $(this).attr("title",""); // Damit der Browser keinen eigenen Tooltip zeigt,
                                      //  das Title-Attribut leeren
   // Um das Title-Attribut später wieder setzen zu können,
  // ihn in ein temporäres Attribut schreiben.
    $(this).attr("tempTitle",content); 

   var hilfeBox = $('
<div>').attr('class','tooltip');

   var ePosition = getPosition(this); // Bestimme x und y Wert des Hilfe-Links

   var eWidth = getElementWidth(this); // Bestimmte die Breite des Hilfe-Links

   $(hilfeBox).css({
        position: "absolute",
        top: ePosition[1],
        left: ePosition[0]+ eWidth +"px",
        width: 250 + "px",
        border: "2px solid red",
        padding: "6px",
        background: "#FFF"
        });

   $("div.tooltip").text(content);
   $("body").append(hilfeBox);

},function(){

 var content = $(this).attr("tempTitle"); // Den Text wieder einlesen
 $(this).attr("title",content); // Wieder in das Title-Attribut schreiben
 $(this).attr("tempTitle",""); // Temporäres Attribut leeren 

 $('div.tooltip').remove() // Tooltip entfernen
});

});

Will man die Tooltips als Hilfen zur Bedienung benutzen und gleichzeitig eine zentrale Hilfeseite bereitstellen, ergeben sich verschiedene Probleme. Insbesondere die doppelte Datenhaltung (Hilfetexte in den Title-Attributen und im HTML der Hilfeseite) verkompliziert die Wartung der Seiten unnötig. Längere Texte in den Title-Attributen sind unschön, insbesondere wenn die Texte mehrfach verwendet werden.

Um diese Hürden zu überwinden, bietet sich der Einsatz von Ajax an. Man legt eine zentrale Hilfeseite an, die sich über die Navigation erreichen läßt. Hier können Bilder, Screencasts und Texte angezeigt werden, die dem Benutzer helfen sollen. Nun können Texte aus dieser Seite mittels Ajax abgefragt und als Tooltip angezeigt werden. Außerdem lassen sich so auch andere Elemente wie Bilder anzeigen, was bei der Title-Attribut-Methode nur schwerlich möglich ist.

Seit der Version 1.2 bietet jquery in seiner load() Methode eine einfache Möglichkeit über CSS-Selektoren HTML aus einem Dokument zu extrahieren und in das DOM einzufügen. Im folgenden Beispiel wird genau diese Methode verwendet.

Zunächst wird neben ein Eingabefeld zur Suche, ein Link gesetzt, der auf den entsprechenden Anker der Hilfeseite verweist.

HTML (Ausschnitt)

 <fieldset>
  <legend>Suche</legend>
<form method="post">

<label>Suchbegriff:</label>
<input class="txt" name="textfield" type="text" />
  <a id="sH" class="hilfe" name="suche" href="hilfeseite.html#suche">?</a>
  <!-- verweist auf den entsprechenden Anker der Hilfeseite -->

<input name="Submit" type="submit" value="Suchen" />
</form>

</fieldset>

Im JavaScript wird ein Eventlistener aktiviert, der auf MouseOver den Hilfetext in einer Box anzeigt und bei MouseOut, die Box wieder aus dem DOM löscht.

JavaScript (Ausschnitt)

 $("a.hilfe").hover(function(){zeigeHilfe(this)},function(){$('#hilfeBox').remove()})

Dieser Eventlistener wird auf alle Links mit der Klasse “hilfe” gelegt, so dass man beliebig viele Hilfelinks setzen kann.

JavaScript(Ausschnitt)

// Kofigurationsparameter, kann am Anfang des JS gesetzt werden
var helpBox =
  {
      width: 250,
       id: "hilfebox"
  }
;
// Diese Funktion erzeugt die Hilfebox

function zeigeHilfe(element){

    var finalLeft = 0; // X-Position der Hilfebox wird auf Null gesetzt

/* Nun wird das href-Attribut des Links zerlegt. Die beiden Teile werden später im Ajax-Aufruf
    verwendet, um die richtige Seite abzufragen und den richtigen CSS-Selector zu verwenden.
     (s.u. HTML der Hilfeseite)
*/

    var hilfeDaten = element.href.split("#");

    var ePosition = getPosition(element); // Bestimme x und y Wert des Hilfe-Links

    var eWidth = getElementWidth(element); // Bestimmte die Breite des Hilfe-Links

    var viewSize= getViewSize(); // Darstellungsbreite ermitteln

    // wenn das Fenster über den rechten Bildrand ragen sollte, nach links verschieben
    if (ePosition[0] + eWidth + 10 + 250 > viewSize[0])
    {
        finalLeft = ePosition[0] - eWidth - 10 - helpBox.width;
    }
    // Sonst nach Links ausrichten
    else{
        finalLeft = ePosition[0] + eWidth + 10 ;
    }
      // Ein DIV bauen und ihm die ID aus den Konfigurationsparametern (s.o.) geben
    var hilfeBox = $('
<div>').attr('id', helpBox.id) 

    // Styles setzen, Rahmen und Farben sollten besser über eine
    // CSS-Datei gesetzt werden Der Einfachheit halber jetzt aber hier.

    $(hilfeBox).css({
        position: "absolute",
        top: ePosition[1],
        left: finalLeft+"px",
        width: helpBox.width + "px",
        border: "2px solid red",
        padding: "6px",
        background: "#FFF"
    });

    // Hilfebox ins DOM einhängen

    $("body").append(hilfeBox);

/* Inhalte aus der Hilfeseite laden
 hilfeDaten[0] ist hier die Hilfeseite aus dem Href-Attribut des Links,
 hilfeDaten[1] ist hier der Name des Ankers. Dieser entspricht gleichzeitig
 der ID des li-Elements der Hilfethemen. (s.u. HTML)

*/
	$("#"+helpbox.id).load(hilfeDaten[0]+"  #"+hilfeDaten[1]+" p.desc");

}

Die Hilfeseite wird per Ajax geladen. Über den CSS-Selektor wird der Inhalt des Absatzes (.desc) im entsprechenden List-Element (#suche) ausgelesen und in die Hilfebox geschrieben.
Der Link verweist dabei auf die richtige Stelle der Hilfeseite, die dann per Klick erreicht werden kann.

HTML der Hilfeseite (Auschnitt):

<ul id="hilfethemen">
	<li id="useredit"> <!--ID des Abschnitts. Muss dem Name-Attribut
   des Ankers entsprechen. -->
  <a name="useredit"></a> <!--Anker zum Verlinken des Hilfethemas -->
<h3>User Editing</h3>
<img src="http://beispiel.de/einScreenshot.jpg" alt="screenshot" />

Lorem ipsum ...</li>
	<li id="suche">
   <a name="suche"></a>
<h3>Suchfunktion</h3>
<img src="http://beispiel.de/einaAndererScreenshot.jpg" alt="screenshot" />

Per Ajax aus der Hilfeseite geladen. Lorem ipsum dolor sit amet, consetetur
     sanct...</li>
</ul>

Natürlich kann man auf diesem Wege auch ganz einfach mehrere Hilfeseiten anlegen, die nach Themen sortiert sind. Eine größere Webanwendung wird dies zweifelsfrei notwendig machen.

Eine Live-Demo des Codes
Die vollständigen Dateien zum Download

Quellen:

http://jquery.com

Tags: ajax, JavaScript, jquery, usability