Bubble-Tooltipps

Tooltipps mit CSS & Javascript

Die recht beliebten Bubble-Tooltipps verwenden als Hintergrund eine kleine Grafik und ähneln dadurch den Sprechblasen in Comic-Heften. Zugleich sorgt diese Grafik für einen Tooltipp mit einem Pfeil zum Link und abgerundeten Ecken, wie sie ansonsten noch nicht möglich sind.

Der Nachteil ist allerdings eine Einschränkung der Flexibilität: Der Tooltipp kann nur unterhalb des Elements eingeblendet werden, da an anderer Stelle eine andere Grafik benötigt wird. Ebenso müssen Grafik und Textlänge aneinander angepasst werden, weil sonst der Text über den eigentlichen Tooltipp hinausragt oder abgeschnitten wird.

Zur Erzeugung eines Tooltipps verwendet das Skript Bubbletooltips eine etwas andere Technik als oben beschrieben: Als Container für den Tooltipp wird zuerst mit der Methode createElement() ein Knoten erzeugt, den die Methode append Child() dann an die bestehende Struktur anhängt. Um den Tooltipp zum Verschwinden zu bringen, wird das zuvor angehängte Element mit der Methode removeChild() wieder gelöscht.

Auch dieses Skript liest das title-Tag aus. Zusätzlich erscheint die im href-Attribut angegebene Adresse automatisch im Tooltipp. Um zu vermeiden, dass die Link-Adresse über den Tooltipp hinausragt, sollte sie auf 30 Zeichen begrenzt werden. Oder Sie entfernen die Adress-Anzeige vollständig. Die Links erhalten nur dann einen Tooltipp, wenn sie sich innerhalb eines div-Elements mit der ID content befinden. Dadurch werden nicht gleich sämtliche Links mit Tooltipps ausgestattet, sondern Sie können Links oder auch Abschnitte, bei denen ein Tooltipp erscheinen soll, gezielt festlegen.

Vorschau-Blasen 2.0

Aus dem Screenshot-Dienst Websnapr sind zwei Bubble-Erweiterungen hervorgegangen: die Websnapr Preview Bubble v2.0 und Link Preview v2. Sie zeigen beim Hovern über einen Link eine Vorschau auf die dahinter liegende Website in einer etwas größeren Blase an.

Die Skripts greifen dabei auf vorgefertigte Bilder zurück, die der Dienst Websnapr bereitstellt. Ganz frisch sind die Vorschau-Thumbnails deshalb nicht, aber um einen visuellen Eindruck der Seite zu gewinnen, die den Besucher hinter einem Link erwartet, taugt das Vorschau-Bild allemal. Die Installation von Websnapr Preview Bubble ist simpel. Passen Sie zuerst den Pfad zum mitgelieferten Blasen-Hintergrund auf Ihrem Webserver an, zum Beispiel:

var bubbleImagePath = '/img/bg.png';

Im Header Ihrer Seite rufen Sie das Skript auf:

Die Klasse previewlink ordnen Sie jedem Link zu, der eine Vorschaufunktion erhalten soll:



http://www.spiegel.de>SPON


Snap Preview Anywhere funktioniert prinzipiell auf die gleiche Weise. Snap fertigt von allen mit dem Skript verknüpften URLs Screenshots an und hält sie vor, um diese als Thumbnail in einem Tooltipp-Bubble auszuliefern, sobald die Adresse mit der Maus angesteuert wird. In Weblogs und trendigen Web-2.0-Sites werden diese Vorschau-Skripts im Moment sehr gern eingesetzt.