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.
Name | Protip |
---|---|
Entwickler | Victor Vincent, DoclerLabs |
Projektwebsite | http://protip.rocks/ |
GitHub | https://github.com/DoclerLabs/Protip |
Efficient Transformers
Christoph Henkelmann, DIVISIO
Enhancing Page Visits by Topic Prediction
Dieter Jordens, Continuum Consulting NV
Machine Learning on Edge using TensorFlow
Håkan Silfvernagel, Miles AS
Aufmacherbild: The words Hello I Am An Expert written on a red nametag or sticker for a consultant von Shutterstock / Urheberrecht: iQoncept