der Browser damit gezwungen ist, beim Rendern der Seite eine Pause einzulegen. Aber wenn wir Inhalte per CSS erst einmal verbergen, die wir später per JavaScript anzeigen wollen, ist das genau das Ergebnis, das wir haben wollen:
Bevor überhaupt mit dem Rendern der Seite begonnen wird, schreiben wir eine CSS-Datei in den
, die all den Inhalt verbirgt, den wir später zeigen wollen, wenn der Anwender mit der Seite interagiert. Der Grund für das Schreiben der CSS-Referenz auf diese Art und Weise liegt darin, dass so bei ausgeschaltetem JavaScript der gesamte Inhalt sichtbar und erreichbar ist. Mehr zu dieser Technik finden Sie in Peter-Paul Kochs “Three JavaScript articles and one best practice“ .
Eigene Tooltips erstellen Problem Von Zeit zu Zeit kann es passieren, dass ein grafisches Element oder ein Aspekt der Oberfläche genauer beschrieben werden muss, der Designer aber aufgrund von Platzproblemen (oder wegen der Ästhetik) keinen wertvollen Bildschirm-Raum für zusätzlichen beschreibenden Text opfern möchte. In solch einem Fall muss man den Anwender, der sich mit dem UI noch nicht so auskennt, ein wenig an die Hand nehmen. Da ist ein Tooltip eine ideale Lösung. Allerdings unterstützt uns HTML da nur sehr rudimentär und das Attribut title="..." sorgt nicht für den gewünschten Effekt. Tooltips können eine gute Lösung darstellen, wenn Elemente der Benutzerschnittstelle beschrieben werden sollen, insbesondere dann, wenn sie mit Benutzereinstellungen verbunden werden können (»Nicht mehr anzeigen«). Allerdings werden dynamische Toolstips oft missbräuchlich angewendet, zum Beispiel bei Blogs, bei denen jedes einzelne Element auf einer Seite mit einem title="..." -Attribut einen Tooltip anzeigt, wenn sich der Mauscursor darüber befindet. Solche Fälle sollten vermieden werden, denn wenn alles und jedes als besonderer Fall behandelt wird, der einen Tooltip nötig hat, können die wirklich wichtigen Elemente nicht mehr hervorstechen und nichts ist mehr besonders. Das wäre so, als ob Sie jedes Wort in einem Satz besonders betonen. Wie bei jedem Web-Projekt sollte der Kontext des Inhalts das Vorgehen festlegen, nicht umgekehrt. Lösung Um dieses Problem zu lösen, können wir jQuery nutzen, um uns die Mausposition im für uns interessanten Bereich zu holen und dann dynamisch ein
-Element dort platzieren, in dem Anweisungen, zusätzliche Informationen (zum Beispiel bei Shop-Seiten) oder irgendetwas anderes stehen kann, was der Entwickler dort haben muss. Dazu würde man ein dynamisch generiertes
noch vor dem schließenden
-Tag erzeugen und ihm einen größeren z-Index als dem Rest der Seite geben. Das sähe dann aus wie in Figure 13-1 . Um zusätzlich sicher zu sein, dass der Tooltip über allen anderen Elementen erscheint, geben wir ihm noch den extrem großen z-Index von 9999 . Figure 13-1. Ein Tooltip, der mit jQuery erzeugt wurde Tooltip – HTML-Code "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Kostenlos Online Lesen 
