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.: Um einen normalen Tooltip zu erstellen, wie er normal auf jeder Webseite von jedem normalen Browser angezeigt wird, benötigt man lediglich das
Doch wie erhält man nun einen Tooltip, wie auf folgendem Screenshot zu sehen? Ganz einfach: Hier wird nur eine zusätzliche Klasse namens
Ferner sieht der Link dann folgendermaßen aus: Diese Klasse führt dazu, dass das JavaScript von Community Framework 2, genauer gesagt dessen Klasse
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).
Benötigt wird lediglich ein ganz normaler Link, z.B.: 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: 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: 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).
1.431 mal gelesen
ciajoe -
Heute zum ersten Mal eingesetzt