Add tooltips

custom.css

@@ -1,4 +1,18 @@
 
+.btn-circle {
+    width: 30px;
+    height: 30px;
+    padding: 6px 0px;
+    border-radius: 20px;
+    text-align: center;
+    font-size: 1rem;
+    line-height: 1;
+    margin: auto;
+    background-color: #E9ECEF;
+    border-width: 1px;
+    border-color: #CED4DA;
+}
+
 .card.bg-info {
   background-color: #91cdd6 !important;
   color: black !important;

view.js

@@ -178,6 +178,9 @@ function generateEnum(data, struct) {
     }
   }
   $el.find('select').val(collection.includes(data) ? data : correctNamespace(data));
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translateValue + '.' + data.replace(/.*:/, '')));
+  }
   return {out: data, component: $el};
 }
 
@@ -432,6 +435,12 @@ function generateField(data, field, parent) {
   return false;
 }
 
+function generateTooltip(str) {
+  let $el = $('<button type="button" class="btn btn-circle ml-2" data-toggle="tooltip">?</button>');
+  $el.tooltip({title: i18next.t('$help.' + str)});
+  return $el;
+}
+
 function preventNewline(e) {
   if (e.which === 13) {
     $(e.target).trigger('change');