LT-67: Adding validation error tooltips when focusing fields

Packages/design/styles/components/states.styl

@@ -1,7 +1,24 @@
 @import "{design}/app"
 
-.state-error:not(.component-group)
+.state-error
-    &.form-control, .form-control
+    &+.tooltip
-        theme('background-color', '$uiStateError')
+
-        theme('border-color', '$uiStateErrorBorder')
+        .tooltip-inner
-        theme('color', '$uiStateErrorText')
+            color: white
+            theme('background-color', '$uiStateErrorBorder')
+
+        &.top .tooltip-arrow
+            theme('border-top-color', '$uiStateErrorBorder')
+        &.right .tooltip-arrow
+            theme('border-right-color', '$uiStateErrorBorder')
+        &.bottom .tooltip-arrow
+            theme('border-bottom-color', '$uiStateErrorBorder')
+        &.left .tooltip-arrow
+            theme('border-left-color', '$uiStateErrorBorder')
+
+
+    &:not(.component-group)
+        &.form-control, .form-control
+            theme('background-color', '$uiStateError')
+            theme('border-color', '$uiStateErrorBorder')
+            theme('color', '$uiStateErrorText')

Packages/ohif-core/client/components/base/mixins/formItem.js

@@ -65,14 +65,25 @@ OHIF.mixins.formItem = new OHIF.Mixin({
 
                 // Set or remove the error message
                 if (errorMessage) {
-                    component.$element.trigger('errorin');
                     component.$wrapper.attr('data-error', errorMessage);
                 } else {
-                    component.$element.trigger('errorout');
                     component.$wrapper.removeAttr('data-error', errorMessage);
                 }
             };
 
+            // Toggle the state over the component
+            component.toggleTooltip = (isShow, message) => {
+                if (isShow) {
+                    console.warn('>>>>message', message);
+                    component.$wrapper.tooltip({
+                        trigger: 'manual',
+                        title: message
+                    }).tooltip('show');
+                } else {
+                    component.$wrapper.tooltip('destroy');
+                }
+            };
+
             // Search for the parent form component
             component.getForm = () => {
                 let currentComponent = component;
@@ -184,15 +195,28 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
             },
 
-            // TODO: [design] remove log, show error box/hint over the wrapper
+            focus(event, instance) {
-            errorin(event, instance) {
+                const component = instance.component;
+
+                // Prevent event bubbling
                 event.stopPropagation();
-                console.log('ERROR when validating component', instance.component);
+
+                // Check for error state and message
+                const errorMessage = component.$wrapper.attr('data-error');
+                if (errorMessage) {
+                    // Show the tooltip with the error message
+                    component.toggleTooltip(true, errorMessage);
+                }
             },
 
-            // TODO: [design] hide error box/hint
+            blur(event, instance) {
-            errorout(event, instance) {
+                const component = instance.component;
+
+                // Prevent event bubbling
                 event.stopPropagation();
+
+                // Hide any tooltips
+                component.toggleTooltip(false);
             }
 
         }

Packages/ohif-core/client/components/base/mixins/select2.js

@@ -65,7 +65,9 @@ OHIF.mixins.select2 = new OHIF.Mixin({
         },
 
         events: {
-            'focus .select2-hidden-accessible'(event, instance) {
+            'focusin .select2-hidden-accessible'(event, instance) {
+                event.preventDefault();
+
                 // Redirect the focus to select2 focus control in case of hidden
                 // accessible being focused (e.g. clicking on outer label)
                 $(event.currentTarget).nextAll('.select2:first').find('.select2-selection').focus();