Improve tooltips

Only show tooltip if help text; move key to title attribute; fix overflow

Author: tomgreenfield

frontend/src/modules/scaffold/less/forms.less

@@ -53,6 +53,7 @@ form .error {
 }
 
 .field {
+  position: relative;
   padding: 10px 30px;
   &-object {
     padding: 8px 10px;
@@ -84,32 +85,21 @@ form .error {
 }
 
 .field-help {
-  position: relative;
   display: inline-block;
   padding: 0 3px;
   .tooltip {
     position: absolute;
     z-index: 2;
-    top: 0;
-    left: 105%;
+    max-width: 300px;
     padding: 5px;
     border-radius: 6px;
+    margin: 10px 0;
     background-color: @tertiary-color;
     color: @white;
     opacity: 0;
     text-align: center;
     transition: opacity 0.3s, visibility 0s 0.3s;
     visibility: hidden;
-    .tooltip-key {
-      color: @primary-color;
-      font-family: monospace;
-    }
-    .tooltip-help {
-      width: 300px;
-      .scaffold-items-modal & {
-        width: 200px;
-      }
-    }
   }
   i:hover + .tooltip {
     opacity: 0.9;

frontend/src/modules/scaffold/templates/field.hbs

@@ -1,15 +1,12 @@
 <div class="field{{#if title}} field-{{stringToClassName title}}{{else}}{{#if legend}} field-object field-object-{{stringToClassName legend}}{{/if}}{{/if}}{{#if isDefaultValue}} is-default-value{{/if}}" data-editor-id="{{editorId}}" data-type="{{#if inputType.type}}{{inputType.type}}{{else}}{{inputType}}{{/if}}">
   {{#if title}}
-  <label for="{{editorId}}">{{title}}</label>
+  <label for="{{editorId}}" title="{{key}}">{{title}}</label>
+  {{#if help}}
   <div class="field-help">
     <i class="fa fa-info-circle"></i>
-    <div class="tooltip">
-      <div class="tooltip-key">{{key}}</div>
-      {{#if help}}
-      <div class="tooltip-help">{{help}}</div>
-      {{/if}}
-    </div>
+    <div class="tooltip">{{help}}</div>
   </div>
+  {{/if}}
   <button class="field-default" data-action="default" title="{{t 'app.reset'}}">
     <i class="fa fa-undo"></i>
   </button>