jmootips Version 1.2.3

jmootips Ein Tooltip (sinngemäß übersetzt: Werkzeughilfe) ist ein kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten, das dem Benutzer einen Beschreibungstext zu einem Element der grafischen Benutzungsoberfläche anzeigt.
Der Tooltip erscheint, wenn der Benutzer den Mauszeiger eine kurze Zeit unbewegt über dem entsprechenden Objekt stehen lässt ("Mouse over"), und verschwindet automatisch, sobald der Mauszeiger weiterbewegt wird. Meist erscheinen wenige Worte in kleiner, jedoch kann auch ein größeres Element erscheinen, das auch Schaltflächen, Links oder Bilder beinhaltet.

Tooltips können ergänzende Informationen zu dem zugehörigen Element enthalten, die ansonsten nicht sichtbar sind; sie können aber auch den Text zeigen, den das Objekt selbst auch enthält.

Das Joomla Plugin jmootips hilft, Artikel bzw. Beiträge über Tooltips informativer zu gestalten. Mit diesem Plugin ist es möglich auf einfachste Art Tooltips bereitzustellen und mit informativen Inhalten zu versehen. Gleichzeitig ist es möglich, Position und Erscheinungsbild des Tooltips ohne Programmierkenntnisse zu konfigurieren.

In diesem Artikel über jmootips werden die Möglichkeiten der Nutzung gezeigt aber auch verwendet, um möglichst viele Informationen bereitzustellen.

Wichtig für die Nutzung von Tooltips, dass man möglichst viele Inhaltstypen (Text, HTML oder Bilder) einbetten kann und diese sehr einfach bereitstellen kann. jmootips kann beliebige Inhaltstypen darstellen, wobei folgende Quellen für den Inhalt des Toooltips unterstützt sind:

Text bzw. HTML via Plugin Tags
Lokaler bzw. entfernter Webserver
Inhalt von Joomla Artikeln/Beiträgen
Inhalt via Ajax Request
Bild (Image) via plugin Tag

jmootips kann überall verwendet werden. Man kann tooltips fast überall auf einer Site einsetzen. Nicht nur in Artikeln, sondern auch in Modulen oder Komponenten, wo Inhalte angezeigt werden.

Installation

Das jmootips Package enthält das "jmootips system plugin" und das "tipbutton editor-xtd plugin". Dieses plugin zeigt eine Schaltfläche (Button) im Editor an, die es ermöglicht Tooltips innerhalb eines Beitrags, mit Hilfe eines Pop-up-Fensters, auszuwählen.
Das Package wird wie üblich in Joomla über das Admin Backend installiert. Nach der Installation sollte sichergestellt sein, dass beide Plugins freigegeben (published) sind. Zusäztlich sollte man den Einsatz der unterstützten Javascript Frameworks, Mootools oder Bootstrap, via Plugin Parameter konfigurieren.

Hinweis: Mit dem Release 1.2.0 wurde das Content- in ein System-Plugin migriert. Falls man ein früheres Release installiert bzw. eingesetzt hat, wird dieses Content-Plugin gesperrt (unpublished). Damit ist sichergestellt, dass nur ein jmootips plugin aktiv ist. Es wird empfohlen, das "alte" plugin zu deinstallieren.

Plugin Parameter

Das Erstellen von Tooltips mit "jmootips" ist sehr einfach und flexibel. Im Folgenden sind die jeweils möglichen Optionen mit Beispielen aufgeführt:

Beispiele

Ein Tooltip nur mit dem Parameter "text"

Nun das geiche Tooltip mit dem Parameter "title"

Mit "position" kann man den Tooltip unterhalb ("below" bzw. "1"), oberhalb ("above" bzw. "-1"), rechts ("right" bzw. "-2") oder oder links ("left" bzw. "2") relativ zum Ziel platzieren
Hinweis: Dieser Parameter wird nur selten benötigt, da er in den Plugin-Parametern gesetzt ist.

Der Parameter "sticky" steuert, ob der Tip automatisch geschlossen wird ("-1" = default), wenn der Mouse-Zeiger aus dem Ziel oder Tooltip bewegt wird, oder ob der Tip nur mit seinem "Close-Button" geschlossen wird ("1")

Der Parameter "openonclick" steuert, ob der Tip via mouseclick geöffnet werden soll

Mit dem Parameter "id" wird er Inhalt und Titel des Tips von einem Joomla Artikel/Beitrag mit dieser Id-Nummer angefordert

Mit dem Parameter "ajax4id" wird der Inhalt und Titel eines Joomla Artikels mit einem Movie nun über die Ajax-Schnittstelle angefordert

Über die Parameterangabe"image" wird er Inhalt des Tip mit einem Bild gefüllt

Man kann auch ein kleines Bild mit einem Tooltip vergrößert anzeigen.

Tooltip Inhalt kann über die Parameterangabe "url" von einer lokalen oder entfernten Host geliefert werden

Tooltip Inhalt kann man auch dynamisch über die AJAX Schnittstelle mit der Parameterangabe "ajax" von einer lokalen Host anfordern

Mit dem Parameter "width" kann man die Breite eines Tooltips explizit setzen (Hier der gleiche Tooltip ohne den Parameter width).

Mit dem Parameter "autoposition" kann man Tooltip Positionen anpassen:

position="left" angefordert und autoposition="1" verwendet
position="left" angefordert und autoposition="0" verwendet

Hinweis: Dieser Parameter wird nur in Ausnahmefällen benötigt, da er in den Plugin-Parametern gesetzt ist.

Source (Syntax)

Ein Tooltip nur mit dem Parameter {tip text="ein einfacher Tip"} "text" {/tip}

Nun das geiche Tooltip mit dem Parameter {tip text="ein einfacher Tip" title="dies ist ein Titel"} "title" {/tip}

Mit {tip text="ein anderer Tip" title="Position "unterhalb"" position="1"}"position"{/tip} kann man den Tooltip unterhalb ("below" bzw. "1"), oberhalb ("above" bzw. "-1"), rechts ("right" bzw. "-2") oder oder links ("left" bzw. "2") relativ zum Ziel platzieren

Der Parameter {tip text="ein einfacher Tip" title="dies ist ein Titel" sticky="1"}"sticky" {/tip} steuert, ob der Tip automatisch geschlossen wird ("-1" = default), wenn der Mouse-Zeiger aus dem Ziel oder Tooltip bewegt wird, oder ob der Tip nur mit seinem "Close-Button" geschlossen wird ("1")

Der Parameter {tip id="152" openonclick="1"}"openonclick" {/tip} steuert, ob der Tip via mouseclick geöffnet werden soll

{tip id="103"}Mit dem Parameter "id" {/tip} wird er Inhalt und Titel des Tips von einem Joomla Artikel/Beitrag mit dieser Id-Nummer angefordert

{tip id="201" ajax4id="1" sticky="1"}Mit dem Parameter "ajax4id" {/tip} wird der Inhalt und Titel eines Joomla Artikels mit einem Movie nun über die Ajax-Schnittstelle angefordert

Über die Parameterangabe{tip image="/plugins/system/jmootips/images/z10.png" title="IBM z/10 System"}"image"{/tip} wird er Inhalt des Tip mit einem Bild gefüllt

Man kann auch ein kleines Bild {tip id="173" position="-1"}<img style="vertical-align:top;margin: 5px;" src="/images/stories/mountains_thumb.jpg" width="50">{/tip} mit einem Tooltip vergrößert anzeigen.

Tooltip Inhalt kann über die Parameterangabe {tip url="/index.php?option=com_content&tmpl=showcontact&id=2&lang=de" title="Webmaster"}"url"{/tip} von einer lokalen oder entfernten Host geliefert werden

Tooltip Inhalt kann man auch dynamisch über die AJAX Schnittstelle mit der Parameterangabe {tip ajax="/plugins/system/jmootips/samples/direstraits-de.html" title="Dire Straits" sticky="1"}"ajax"{/tip} von einer lokalen Host anfordern

Mit dem Parameter "width" kann man die {tip id="145" position="above" width="300"}Breite eines Tooltips{/tip} explizit setzen (Hier der {tip id="145" position="left"}gleiche Tooltip{/tip}ohne den Parameter width).

Admin Backend

Plugin Parameter via Admin Backend

Über das Admin Backend lassen sich Defaults für das Plugin definieren, z. B. die Einbindung der unterstützten Javascript Frameworks anpassen:

Das Layout von Tooltips (Hintergrundfarbe, Schriftgröße,... etc) wird über die CSS-Klasse "jmootips" gesteuert. Hier kann man auch eine eigene Klasse angeben - diese muss jedoch in CSS-Files (Style Sheets) bereitgestellt werden, die Joomla im Zugriff hat
Wenn man eigene Style-Sheets (CSS-Files) für die Tooltip Styles verwenden möchte, kann man das Einbinden des Style-Sheets von jmootips ausschalten.
Das standardmäßige Verhalten von Tooltips (automatisch schließen bzw. geöffnet bleiben) kann man definieren
Mit der Option "Öffnen mit Mouseclick" wird ein Tooltip ähnlich wie ein Popup erst geöffnet, wenn das Ziel angeklickt wird.
Die standardmäßige Position, wie Tooltips relativ zum Ziel ausgerichtet sind, läßt hier setzen
Mit "Auto Position" erlaubt man jmootips, die Tooltip-Positionen in Bezug zum dargestellten Inhalt automatisch anzupassen.
Mit der Option "Verwende AJAX für Artikel" kann man den Inhalt von Joomla Artikeln über die AJAX Schnittstelle dynamisch erstellen lassen. D. h. der jeweilige Inhalt eines Tooltips wird erst dann erstellt, wenn der Benutzer das Ziel mit der Mouse auswählt (diese Option ist nur wirksam mit der Parameterangabe "id").
jmootips version 1.1 unterstützt das populäre Twitter Bootstrap Javascript Framework, das speziell auch bei Joomla Version 3 eingesetzt wird. Mit "Bootstrap verwenden" wird anstatt Mootools dieses Framework für die Erstellung von Tooltips verwendet.
Wenn man das Mootools Framework verwendet, benötigt jmootips die Mootools Javascript Bibliotheken.
Mit "Mootools hinzufügen" steuert man, ob keine, beide oder nur eine ca. 6k große Version von "mootools-more" von dem Plugin in die laufende Seite eingefügt werden soll.
Wenn man nicht möchte, dass Tooltip Inhalte via url angefordert werden, muss man den Paramter "Angabe url erlauben" auf "Nein" (Default) setzen.
Aus Sicherheitsgründen sollte man nicht erlauben, dass Inhalte von fremden Systemen angefordert werden. Wenn man aber weiss, das kein Misbrauch möglich ist, kann man den Zugriff zulassen.

Neuigkeiten

Mit Release 1.2.3 kann man nun jmootips erlauben, die Tooltip-Positionen in Bezug zum dargestellten Inhalt automatisch anzupassen. Diese Option kann global via Admin-Backend oder individuell mit den jmootips Plugin-Tags verwendet werden.

jmootips Release 1.2.2 verwendet nun die Joomla Core Ajax-Schnittstelle (eingeführt mit Joomla Version 3.2), wenn der Parameter "ajax4id" eingesetzt wird. Dies bedeutet, dass nun erst mit der Joomla Version 3.2 dieser Parameter verwendet werden kann.

Release 1.2.1 unterstützt den neuen Paremeter "width" für die explizite Definition der Breite eines Tips (ohne dass HTML- oder CSS-Tags angepasst werden müssen). Neu ist auch der Einsatz der neuesten Version (3.3.1) des Bootstrap Javascript Frameworks. Das Verhalten von Tips mit dem Parameter "sticky" wurde für den Einsatz von Bootstrap geändert. Tips schließen erst, wenn der Benutzer den Mauzeiger aus dem Tip bewegt. (Hover In/Out)

Mit dem Release 1.2.0 wurde das Content- in ein System-Plugin migriert. Mit dem System Plugintyp ist es nun möglich, jmootips Tooltip Tags auch in Joomla! Modulen oder Komponenten zu verwenden. Auf der rechten Spalte dieser Seite kann man sehen (Mousezeiger auf die Images bewegen), wie diese Möglichkeit von der Joomla! Banner Komponente und von meinem Besucherzähler genutzt wird.

Build 1.2.0.9 fixed ein Problem bei (Re-)Edit via Frontend von Artikeln mit Tooltip-Tags von jmootips.

Build Level 1.2.0.8 fixed ein Problem, das auftreten kann, wenn man das Bootstrap-Framework zusammen mit dem javascript-File "mootools-more.js" verwendet.

Build Level 1.1.2.3 beinhaltet Javascript Erweiterungen für Benutzer von Tablets oder Mobile Devices. Da hier in der Regel Touch Screens verwendet werden, sind Mouse Events wie "mouseover" oder "mouseleave" nicht unterstützt. Aus diesem Grund wird für solche Systeme das Attribut "openonclick" zugewiesen. D. h. Tooltips öffnen sich, wenn das Ziel berührt wird. Für die Konfiguration mit dem Mootools Javascript Frameworks wird zusätzlich das Attribut "sticky" zugewiesen, man schließt also den Tip mit dem Close-Button. Bei Verwendung des Bootstrap Frameworks öffnen/schliessen die Tips bei der Berührung des Ziels.

Mit dem Build Level 1.1.2.9 werden nun die Pfeile von Tooltips in der Mitte des Tips platziert, wenn die Tooltip Position oberhalb bzw. unterhalb der Ziels liegt.