jQuery-Plugin zur Vereinfachung und Vereinheitlichung der Darstellung von Tooltips

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

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.

Protip

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.

Name Protip
Entwickler Victor Vincent, DoclerLabs
Projektwebsite http://protip.rocks/
GitHub https://github.com/DoclerLabs/Protip

 

Aufmacherbild: The words Hello I Am An Expert written on a red nametag or sticker for a consultant von Shutterstock / Urheberrecht: iQoncept

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -