Protip – jQuery-Tooltip-Plugin für alle Fälle

jQuery-Plugin zur Vereinfachung und Vereinheitlichung der Darstellung von Tooltips

Protip – eine Software mit einem solchen Namen müssen wir euch einfach vorstellen. Gerade im Admin- oder im Control-Panel- Bereich werden ständig verschiedene Tooltips eingesetzt – um das Ganze zu vereinfachen, wurde das jQuery-Plugin Protip entwickelt.

Protip, eine neue Generation von Tooltips – so nennt Erfinder Victor Vincent seine Software. Das jQuery-Plugin soll die Darstellung von Tooltips vereinfachen und vereinheitlichen und somit beinahe jedes Use Case bedienen können.

Protip rocks

Mit Protip lassen sich ganz leicht das Aussehen und das Verhalten von Tooltips steuern. Zuerst sollten Entwickler allgemeine Eigenschaften bei der Initialisierung festlegen; dazu gehören beispielsweise:

Property	Default	Details
selector	.protip	We will use this selector to identify elements with protip.
namespace	pt	data-[NAMESPACE]-*
protipTemplate	See code	Template of a protip. Variables ({}) will get replaced.
arrowTemplate	See code	Template of a protip arrow.
iconTemplate	See code	Template of a protip with icon.
observer	true	If true, we will watch for changes in the DOM and check if a protip needs to be showed or removed.
delayResize	100	Default time for onResize event timeout. After a resize, we need to reposition the tooltips, but don’t want to run on every fired resize event.
defaults	{…}	Default (global) values for a tooltip. Override any available data-pt-* attributes.

Tooltips werden über Daten-Attribute kontrolliert – sprich: Alles lässt sich vom Markup aus lenken, kein zusätzlicher JavaScript-Code ist nötig. Auch hier stehen über 20 Attribute zur Verfügung, mit denen sich die Tooltips anpassen lassen. Dazu zählen zum Beispiel trigger, delay-in oder animate. Gerade beim Element gravity sind der Position des entsprechenden Tooltips kaum Grenzen gesetzt: Über 40 Positionen in drei Ebenen stehen zur Auswahl.

Zusätzlich lässt sich über true/false einstellen, ob eine gravity-Option überhaupt gewünscht ist. Wird sie eingestellt, wird Protip alle möglichen Positionen ausprobieren. Allerdings lässt sich auch manuell die gewünschte Position des Tooltips festlegen. Auch über einen eingebauten Support von Animate.css verfügt das Plugin.

Protip bietet außerdem einen Refresh der Tooltip-Optionen in Echtzeit sowie eine direkte Element-Überprüfung. Des Weiteren werden Auto-hide, Skins und Icons unterstützt; auch Callback-Events und DOM-Targets werden unterstützt.

Über die offizielle Projektwebseite oder über GitHub kann die aktuelle Version von Protip heruntergeladen werden. Dort finden sich neben der Installationsanweisung auch Tipps zum Umgang mit der Software.Die Webseite selbst dient als Demo, die die verschiedenen Features von Protip aufzeigt.