tooltips for input elements

2 files changed, 34 insertions, 2 deletions

diff --git a/module/web/static/js/views/input/inputView.js b/module/web/static/js/views/input/inputView.js
index 15dc71aad..56087c516 100644
--- a/module/web/static/js/views/input/inputView.js
+++ b/module/web/static/js/views/input/inputView.js
@@ -10,6 +10,9 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
         default_value: null,
         description: null,
 
+        // enables tooltips
+        tooltip: true,
+
         initialize: function(model, value, default_value, description) {
             this.model = model;
             this.value = value;
@@ -18,9 +21,36 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
         },
 
         render: function() {
+            this.renderInput();
+
+            // data for tooltips
+            if (this.description && this.tooltip) {
+                this.$el.data('content', this.description);
+//                this.$el.data('title', "TODO: title");
+                this.$el.popover({
+                    placement: 'right',
+                    trigger: 'hover',
+                    delay: { show: 500, hide: 100 }
+                });
+            }
+
             return this;
         },
 
+        renderInput: function() {
+            // Overwrite this
+        },
+
+        showTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('show');
+        },
+
+        hideTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('hide');
+        },
+
         destroy: function() {
             this.undelegateEvents();
             this.unbind();
diff --git a/module/web/static/js/views/input/textInput.js b/module/web/static/js/views/input/textInput.js
index 7252ce289..36cdf9f06 100644
--- a/module/web/static/js/views/input/textInput.js
+++ b/module/web/static/js/views/input/textInput.js
@@ -5,10 +5,12 @@ define(['jquery', 'backbone', 'underscore', './inputView'], function($, Backbone
         // TODO
         tagName: 'input',
         events: {
-            'keypress': 'onChange'
+            'keypress': 'onChange',
+            'focus': 'showTooltip',
+            'focusout': 'hideTooltip'
         },
 
-        render: function() {
+        renderInput: function() {
             this.$el.attr('type', 'text');
             this.$el.attr('name', 'textInput');