jmootipsEin 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.4 wird die mit Joomla ab Version 3.3 verwendete namespaced API verwendet. Diese Version von jmootips ist für Joomla Version 3.9 getestet und für Version 4.x vorbereitet.

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.

 

Tips/FAQs

Tooltips organisieren

Tooltips in Joomla Artikeln/Beiträgen organisieren

jmootips erlaubt mit seiner Möglichkeit, Joomla Artikel/Beiträge als Tooltip-Inhalte zu verwenden, den Einsatz sehr flexibel und einfach zu gestalten. Folgendes sollte man jedoch beachten bzw. einrichten:
  1. Einrichten einer eigenen Kategorie, z. B. "Tooltips"
  2. Erstellen von Tooltip-Inhalten (Beiträgen) innerhalb dieser Kategorie
Im Wysiwyg Editor (z.B. JCE) ist der Toolbar-Button, "Tooltip" mit dem "Editor Button Plugin" verfügbar. Mit Hilfe dieser Schaltfläche ist es sehr einfach Tooltip-Tags in den jeweiligen Text an der Cursor-Position einzufügen.
Hier ein kleines Beispiel , das zeigt, wie man einen Tooltip-Inhalt bearbeitet und dann in einem Artikel verwendet.

Hinweis:
Man kann nur Inhalte von Artikeln für Tooltips verwenden, die den Status "Freigegeben" ("Published") und die Zugriffsebene "Public" haben.

Layout


Eigene Stylesheets (CSS) verwenden

Wenn man eigene Styles für Tooltips verwendem möchte, sollte man die jmootips CSS-Files nicht editieren bzw. verändern sondern den Inhalt aus "../plugins/system/jmootips/jmootips.css" z. B. in ein Template CSS-File kopieren and dann anpassen. Danach muss der Plugin Parameter "jmootips CSS File" via Admin Backend auf "Nein" gesetzt werden.

Hinweis:
Die maximale Breite eines Tooltips ist im Stylesheet von jmootips festgelegt. Man kann nun die Breite eines Tips mit dem Parameter "width" setzten. Die Breite läßt sich aber auch über den Wysiwyg-Editor (z. B. JCE) mit dem Tool CSS-Style (JCE) beeinflussen. Desgleichen lassen sich hier auch weitere Layout-Parameter definieren.

Bootstrap

Hinweise zu Bootstrap

Wie der Name "jmootips" andeutet wurde für die Implementieren von Tooltips zunächst nur das Javascript Framework "Mootools" verwendet. Mit dieser Version kann auch ein zweites Framework, Bootstrap verwendet werden. Das Erscheinungsbild der Tips ist weitgehend gleich geblieben, jedoch gibt es zwei Unterschiede:

Ajax

AJAX Schnittstelle verwenden oder nicht?

Die Einsatz von AJAX hat den Vorteil, dass Inhalte erst dann geladen werden, wenn der Benutzer ein Tooltip anfordert. Ohne AJAX Schnittstelle werden alle Tooltipinhalte zusammen mit der Seite geladen. Dies hat zwar den Nachteil, dass das Laden der HTML-Seite etwas länger dauert, jedoch damit alle Inhalte sofort abrufbar sind. Tooltips sind in der Regel relativ klein sodass die Ladezeiten damit unerheblich (im Millisekundenbereich) länger sind, sich also der zusätzliche Aufwand durch AJAX kaum lohnt.

Hinweise

Bekannte Probleme/Hinweise

Wenn man die AJAX-Schnittstelle zu Laden von Tooltipinhalten aus Artikeln (via Parameter "id") verwendet und eine mehrsprachige Site bereitstellt, werden Tooltipinhalte für eine bestimmte Sprache nur jeweils für dieser Sprache dargestellt. Wenn man einen Tooltipinhalt für alle Sprachen bereitstellen möchte, muss die Sprache "Alle" zugeordnet werden.

Tooltip Inhalte können beliebigen HTML-Code enthalten. Da der Tooltipinhalt zusammen mit der jeweiligen HTML-Seite geladen wird, ist es sehr wichtig, dass nur fehlerfreier HTML-Code verwendet wird. Desgleichen muss sicher gestellt sein, dass kein Schadcode eingesetzt werden kann, z. B.:

Download jmootips

jmootips ist freie Software (wie Joomla!) - jedoch müssen Sie die GPL-Linzenzbestimmungen für seinen Einsatz beachten. Mehr über GPL und freie Software finden man bei GNU Org.

Zum Download von jmootips klicken Sie das "download" Bild:

downloadjmootips Version 1.2.4 für Joomla! ab Version 3.8

Noch Fragen? Besuchen Sie das Support Forum für jmootips oder senden Sie eine Email an den Entwickler, unseren Webmaster.

 

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Ok