tooltips for input elements

4 files changed, 49 insertions, 8 deletions

diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less
index 4b4efb423..d7012f17a 100644
--- a/module/web/static/css/default/settings.less
+++ b/module/web/static/css/default/settings.less
@@ -5,16 +5,14 @@
 */

 .settings-menu {

   background-color: #FFF;

-  box-shadow: 0 0 5px #000;

-//  border: 10px solid #EEE;

-

+  box-shadow: 0 0 5px #000; //  border: 10px solid #EEE;

 

   .nav-header {

     background: @blueDark;

     color: @light;

   }

 

-   li > a, .nav-header {

+  li > a, .nav-header {

     margin-left: -20px;

     margin-right: -20px;

     text-shadow: none;

@@ -35,8 +33,7 @@
 

 .setting-box {

   border: 10px solid @blueDark;

-  box-shadow: 0 0 5px @dark;

-//  .gradient(bottom, @yellowLightest, @light);

+  box-shadow: 0 0 5px @dark; //  .gradient(bottom, @yellowLightest, @light);

 

   .page-header {

     margin: 0;

@@ -48,4 +45,15 @@
 

   }

 

+// Bit wider control labels

+  .control-label {

+    width: 180px;

+  }

+  .controls {

+    margin-left: 200px;

+  }

+  .form-actions {

+    padding-left: 200px;

+  }

+

 }
\ No newline at end of file
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');
 
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index 7f6bbeb8e..a32a6e0dd 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -46,6 +46,7 @@
         <div class="control-group">

             <label class="control-label"><% label %></label>

             <div class="controls">

+{#                <span class="help-inline"><% description %></span>#}

             </div>

         </div>

     </script>