Merge branch 'add-schema-description-tooltips' of https://github.com/AdamVig/jsoneditor into AdamVig-add-schema-description-tooltips

src/js/Node.js

@@ -1845,6 +1845,11 @@ Node.prototype._deleteDomColor = function () {
 Node.prototype._updateDomField = function () {
   var domField = this.dom.field;
   if (domField) {
+    var tooltip = util.makeFieldTooltip(this.schema);
+    if (tooltip) {
+      domField.title = tooltip;
+    }
+
     // make backgound color lightgray when empty
     var isEmpty = (String(this.field) == '' && this.parent.type != 'array');
     if (isEmpty) {
@@ -2461,8 +2466,6 @@ Node.prototype.updateDom = function (options) {
       domField.contentEditable = this.editable.field;
       domField.spellcheck = false;
       domField.className = 'jsoneditor-field';
-      // add title from schema description to show the tips for user input
-      domField.title = Node._findSchema(this.editor.options.schema || {}, this.editor.options.schemaRefs || {}, this.getPath())['description'] || '';
     }
     else {
       // parent is an array this is the root node

src/js/util.js

@@ -1105,4 +1105,29 @@ if (!Array.prototype.find) {
       }
     }
   }
-}
+}
+
+/**
+ * Make a tooltip for a field based on the field's schema.
+ * @param {Object} schema JSON schema
+ * @returns {string} Field tooltip, may be empty string if all relevant schema properties are missing
+ */
+exports.makeFieldTooltip = function (schema) {
+  if (!schema) {
+    return '';
+  }
+  
+  var tooltip = '';
+  if (schema.title) {
+    tooltip += schema.title;
+  }
+  
+  if (schema.description) {
+    if (tooltip.length > 0) {
+      tooltip += '\n';
+    }
+    tooltip += schema.description;
+  }
+
+  return tooltip;
+}

test/util.test.js

@@ -148,5 +148,33 @@ describe('util', function () {
     });
 
   })
+  describe('makeFieldTooltip', function () {
+    it('should return empty string when the schema is missing all relevant fields', function () {
+      assert.strictEqual(util.makeFieldTooltip({}), '')
+      assert.strictEqual(util.makeFieldTooltip({additionalProperties: false}), '')
+      assert.strictEqual(util.makeFieldTooltip(), '')
+    });
+  
+    it('should make tooltips with only title', function () {
+      assert.strictEqual(util.makeFieldTooltip({title: 'foo'}), 'foo');
+    });
+
+    it('should make tooltips with only description', function () {
+      assert.strictEqual(util.makeFieldTooltip({description: 'foo'}), 'foo');
+    });
+
+    it('should make tooltips with title and description', function () {
+      assert.strictEqual(util.makeFieldTooltip({title: 'foo', description: 'bar'}), 'foo\nbar');
+
+      var longTitle = 'Lorem Ipsum Dolor';
+      var longDescription = 'Duis id elit non ante gravida vestibulum non nec est. ' +
+        'Proin vitae ligula at elit dapibus tempor. ' +
+        'Etiam lacinia augue vel condimentum interdum. ';
+      assert.strictEqual(
+        util.makeFieldTooltip({title: longTitle, description: longDescription}),
+        longTitle + '\n' + longDescription
+      );
+    });
+  });
   // TODO: thoroughly test all util methods
 });