From 1bfcc764aed9b40951ddac9dc090f5bf2e442999 Mon Sep 17 00:00:00 2001
From: Diego Moonhaze <dmcelectrico@gmail.com>
Date: Mon, 12 Oct 2015 16:43:53 +0200
Subject: [PATCH] Added tooltip support in schema properties for more detailed
 description of the fields.

---
 examples/basic_person.json     | 1 +
 examples/person.json           | 1 +
 src/editors/array/selectize.js | 3 ++-
 src/editors/base64.js          | 3 ++-
 src/editors/checkbox.js        | 3 ++-
 src/editors/multiselect.js     | 5 +++--
 src/editors/select.js          | 3 ++-
 src/editors/selectize.js       | 3 ++-
 src/editors/string.js          | 3 ++-
 src/editors/upload.js          | 3 ++-
 src/theme.js                   | 3 ++-
 src/themes/bootstrap2.js       | 3 ++-
 src/themes/bootstrap3.js       | 3 ++-
 src/themes/jqueryui.js         | 3 ++-
 14 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/examples/basic_person.json b/examples/basic_person.json
index 05f53faba..1989b2d6a 100644
--- a/examples/basic_person.json
+++ b/examples/basic_person.json
@@ -6,6 +6,7 @@
     "name": {
       "type": "string",
       "description": "First and Last name",
+      "tooltip": "First and last name of the simple person",
       "minLength": 4
     },
     "age": {
diff --git a/examples/person.json b/examples/person.json
index d6d497121..1c2964802 100644
--- a/examples/person.json
+++ b/examples/person.json
@@ -6,6 +6,7 @@
       "title": "Location",
       "properties": {
         "city": {
+          "tooltip": "this is a tooltip",
           "type": "string"
         },
         "state": {
diff --git a/src/editors/array/selectize.js b/src/editors/array/selectize.js
index 80590374a..45f7b72d9 100644
--- a/src/editors/array/selectize.js
+++ b/src/editors/array/selectize.js
@@ -10,10 +10,11 @@ JSONEditor.defaults.editors.arraySelectize = JSONEditor.AbstractEditor.extend({
       this.description = this.theme.getDescription(this.schema.description);
     }
 
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
     this.input = document.createElement('select');
     this.input.setAttribute('multiple', 'multiple');
 
-    var group = this.theme.getFormControl(this.title, this.input, this.description);
+    var group = this.theme.getFormControl(this.title, this.input, this.description, this.tooltip);
 
     this.container.appendChild(group);
     this.container.appendChild(this.error_holder);
diff --git a/src/editors/base64.js b/src/editors/base64.js
index 70bc37ea5..e52d2a11d 100644
--- a/src/editors/base64.js
+++ b/src/editors/base64.js
@@ -5,6 +5,7 @@ JSONEditor.defaults.editors.base64 = JSONEditor.AbstractEditor.extend({
   build: function() {    
     var self = this;
     this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
 
     // Input that holds the base64 string
     this.input = this.theme.getFormInputField('hidden');
@@ -37,7 +38,7 @@ JSONEditor.defaults.editors.base64 = JSONEditor.AbstractEditor.extend({
     this.preview = this.theme.getFormInputDescription(this.schema.description);
     this.container.appendChild(this.preview);
 
-    this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview);
+    this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview, this.tooltip);
     this.container.appendChild(this.control);
   },
   refreshPreview: function() {
diff --git a/src/editors/checkbox.js b/src/editors/checkbox.js
index ee26cf6c0..a3843a9ea 100644
--- a/src/editors/checkbox.js
+++ b/src/editors/checkbox.js
@@ -24,9 +24,10 @@ JSONEditor.defaults.editors.checkbox = JSONEditor.AbstractEditor.extend({
     }
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
     if(this.options.compact) this.container.className += ' compact';
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
 
     this.input = this.theme.getCheckbox();
-    this.control = this.theme.getFormControl(this.label, this.input, this.description);
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.tooltip);
 
     if(this.schema.readOnly || this.schema.readonly) {
       this.always_disabled = true;
diff --git a/src/editors/multiselect.js b/src/editors/multiselect.js
index d960c03a5..9c55334a6 100644
--- a/src/editors/multiselect.js
+++ b/src/editors/multiselect.js
@@ -21,6 +21,7 @@ JSONEditor.defaults.editors.multiselect = JSONEditor.AbstractEditor.extend({
     var self = this, i;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
 
     if((!this.schema.format && this.option_keys.length < 8) || this.schema.format === "checkbox") {
       this.input_type = 'checkboxes';
@@ -31,7 +32,7 @@ JSONEditor.defaults.editors.multiselect = JSONEditor.AbstractEditor.extend({
         this.inputs[this.option_keys[i]] = this.theme.getCheckbox();
         this.select_options[this.option_keys[i]] = this.inputs[this.option_keys[i]];
         var label = this.theme.getCheckboxLabel(this.option_keys[i]);
-        this.controls[this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]]);
+        this.controls[this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]], null, null);
       }
 
       this.control = this.theme.getMultiCheckboxHolder(this.controls,this.label,this.description);
@@ -51,7 +52,7 @@ JSONEditor.defaults.editors.multiselect = JSONEditor.AbstractEditor.extend({
         this.input.disabled = true;
       }
 
-      this.control = this.theme.getFormControl(this.label, this.input, this.description);
+      this.control = this.theme.getFormControl(this.label, this.input, this.description, this.tooltip);
     }
 
     this.container.appendChild(this.control);
diff --git a/src/editors/select.js b/src/editors/select.js
index 412f1ed59..b58813d16 100644
--- a/src/editors/select.js
+++ b/src/editors/select.js
@@ -155,6 +155,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
     var self = this;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
 
     if(this.options.compact) this.container.className += ' compact';
 
@@ -172,7 +173,7 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
       self.onInputChange();
     });
 
-    this.control = this.theme.getFormControl(this.label, this.input, this.description);
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.tooltip);
     this.container.appendChild(this.control);
 
     this.value = this.enum_values[0];
diff --git a/src/editors/selectize.js b/src/editors/selectize.js
index 29e2e5cee..621a639a4 100644
--- a/src/editors/selectize.js
+++ b/src/editors/selectize.js
@@ -145,6 +145,7 @@ JSONEditor.defaults.editors.selectize = JSONEditor.AbstractEditor.extend({
     var self = this;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
 
     if(this.options.compact) this.container.className += ' compact';
 
@@ -162,7 +163,7 @@ JSONEditor.defaults.editors.selectize = JSONEditor.AbstractEditor.extend({
       self.onInputChange();
     });
 
-    this.control = this.theme.getFormControl(this.label, this.input, this.description);
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.tooltip);
     this.container.appendChild(this.control);
 
     this.value = this.enum_values[0];
diff --git a/src/editors/string.js b/src/editors/string.js
index fb92ff51d..81a8661e6 100644
--- a/src/editors/string.js
+++ b/src/editors/string.js
@@ -68,6 +68,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
     var self = this, i;
     if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
     if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
 
     this.format = this.schema.format;
     if(!this.format && this.schema.media && this.schema.media.type) {
@@ -251,7 +252,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
 
     if(this.format) this.input.setAttribute('data-schemaformat',this.format);
 
-    this.control = this.theme.getFormControl(this.label, this.input, this.description);
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.tooltip);
     this.container.appendChild(this.control);
 
     // Any special formatting that needs to happen after the input is added to the dom
diff --git a/src/editors/upload.js b/src/editors/upload.js
index 88de8a9b9..4a8122caf 100644
--- a/src/editors/upload.js
+++ b/src/editors/upload.js
@@ -37,11 +37,12 @@ JSONEditor.defaults.editors.upload = JSONEditor.AbstractEditor.extend({
 
     var description = this.schema.description;
     if (!description) description = '';
+    if(this.schema.tooltip) this.tooltip = this.schema.tooltip;
 
     this.preview = this.theme.getFormInputDescription(description);
     this.container.appendChild(this.preview);
 
-    this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview);
+    this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview, this.tooltip);
     this.container.appendChild(this.control);
   },
   refreshPreview: function() {
diff --git a/src/theme.js b/src/theme.js
index da477e667..a98f6a163 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -166,9 +166,10 @@ JSONEditor.AbstractTheme = Class.extend({
   afterInputReady: function(input) {
 
   },
-  getFormControl: function(label, input, description) {
+  getFormControl: function(label, input, description, tooltip) {
     var el = document.createElement('div');
     el.className = 'form-control';
+    if(tooltip) el.title = tooltip;
     if(label) el.appendChild(label);
     if(input.type === 'checkbox') {
       label.insertBefore(input,label.firstChild);
diff --git a/src/themes/bootstrap2.js b/src/themes/bootstrap2.js
index d71e5ceed..195082c45 100644
--- a/src/themes/bootstrap2.js
+++ b/src/themes/bootstrap2.js
@@ -57,9 +57,10 @@ JSONEditor.defaults.themes.bootstrap2 = JSONEditor.AbstractTheme.extend({
     el.textContent = text;
     return el;
   },
-  getFormControl: function(label, input, description) {
+  getFormControl: function(label, input, description, tooltip) {
     var ret = document.createElement('div');
     ret.className = 'control-group';
+    if(tooltip) ret.title = tooltip;
 
     var controls = document.createElement('div');
     controls.className = 'controls';
diff --git a/src/themes/bootstrap3.js b/src/themes/bootstrap3.js
index 61b8f6c30..f9310af00 100644
--- a/src/themes/bootstrap3.js
+++ b/src/themes/bootstrap3.js
@@ -33,8 +33,9 @@ JSONEditor.defaults.themes.bootstrap3 = JSONEditor.AbstractTheme.extend({
     }
     return el;
   },
-  getFormControl: function(label, input, description) {
+  getFormControl: function(label, input, description, tooltip) {
     var group = document.createElement('div');
+    if(tooltip) group.title = tooltip;
 
     if(label && input.type === 'checkbox') {
       group.className += ' checkbox';
diff --git a/src/themes/jqueryui.js b/src/themes/jqueryui.js
index 5c050ecb2..932f3bd28 100644
--- a/src/themes/jqueryui.js
+++ b/src/themes/jqueryui.js
@@ -29,8 +29,9 @@ JSONEditor.defaults.themes.jqueryui = JSONEditor.AbstractTheme.extend({
     el.style.display = 'inline-block';
     return el;
   },
-  getFormControl: function(label, input, description) {
+  getFormControl: function(label, input, description, tooltip) {
     var el = this._super(label,input,description);
+    if(tooltip) el.title = tooltip;
     if(input.type === 'checkbox') {
       el.style.lineHeight = '25px';