WCF2: Eigene Tooltips hinzufügen

  • WCF 2

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Eingeführt mit Community Framework 2 wurden eigens erstellte Tooltips, welche sich von den Standard-Tooltips des jeweiligen Systems bzw. Browsers unterscheiden. Diese hinzuzufügen, ist relativ einfach. Da jedoch sicherlich einige nicht wissen, wie leicht es tatsächlich umgesetzt werden kann, möchte ich dies hier einmal zeigen.

Benötigt wird lediglich ein ganz normaler Link, z.B.:

HTML-Quellcode

  1. <a href="{link}{/link}">Example</a>
Um einen normalen Tooltip zu erstellen, wie er normal auf jeder Webseite von jedem normalen Browser angezeigt wird, benötigt man lediglich das title=""-Attribut, z.B. so:

HTML-Quellcode

  1. <a href="{link}{/link}" title="Example Tooltip">Example</a>
Somit wird beim Maus-Hover über den Link nun "Example Tooltip" als Tooltip angezeigt.

Doch wie erhält man nun einen Tooltip, wie auf folgendem Screenshot zu sehen?
Ganz einfach: Hier wird nur eine zusätzliche Klasse namens jsTooltip benötigt.
Ferner sieht der Link dann folgendermaßen aus:

HTML-Quellcode

  1. <a href="{link}{/link}" title="Example Tooltip" class="jsTooltip">Example</a>
Diese Klasse führt dazu, dass das JavaScript von Community Framework 2, genauer gesagt dessen Klasse WCF.Effect.BalloonTooltip, diesen Link erkennt und den Inhalt des title=""-Attributs als eigenen Tooltip anzeigt.

Man braucht demnach nicht einmal ein Plugin, um das bei bereits vorhandenen Links im Template umzusetzen. Allerdings sollte man auf die korrekte Einbindung achten, d.h. nicht wahllos bei jedem Link vollziehen, sondern so, wie es von WoltLab vorgegeben ist: Nur an Stellen, an welchen der eigentliche Text nicht vorhanden ist (z.B. bei kleinen Buttons, bei welchen die Beschreibung ausgeblendet ist).
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

1.431 mal gelesen

Kommentare 5

  • ciajoe -

    Heute zum ersten Mal eingesetzt :)

  • Black Rider -

    Wurde nun hinzugefügt. :)

  • Spock -

    @Black Rider: Vielleicht wäre es aus dem Grund günstig, wenn du die korrekte Verwendung im Artikel noch mit ergänzt.

  • Black Rider -

    Kommt drauf an, wie es eingesetzt wird. Denn wenn man aufpasst, wird man merken, dass diese Tooltips nicht hinter jedem Link zu finden sind.
    Stattdessen werden sie nur dann angezeigt, wenn der eigentliche Linktext nicht sichtbar ist.

    Ob das die Entwickler nachher aber ebenso umsetzen, ist fraglich...

  • CIA JOE -

    Das wird helfen Konsitzenz zu waren. :)