Displaying error message as tooltip functional. #9

Author: sagrawal31

dist/bootstrap-angular-validation.min.js

@@ -24,14 +24,6 @@ angular.module('bootstrap.angular.validation').directive('bsValidation', [
             var ngModelController = controllers[0];
             var ngFormController = controllers[1];
 
-            // HTML selector helper
-            var errorElementClass = 'bs-invalid-msg';
-
-            var helpBlock = 'help-block';
-
-            // All classed needed to add to validation message
-            var errorClasses = [errorElementClass, helpBlock];
-
             var $formGroupElement = validationService.getFormGroupElement($element);
             if (!$formGroupElement) {
               throw 'No parent form group element found for input element';
@@ -55,7 +47,7 @@ angular.module('bootstrap.angular.validation').directive('bsValidation', [
             });
 
             function removeErrors() {
-              validationMessageService.hideErrorMessage($formGroupElement);
+              validationMessageService.hideErrorMessage($element, $formGroupElement);
             }
 
             function removeSuccessClass() {

src/directives/validation.directive.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('bootstrap.angular.validation').factory('simpleMessageService', ['BsValidationService', function(bsValidationService) {
+angular.module('bootstrap.angular.validation').factory('simpleMessageService', ['BsValidationService', function(validationService) {
 
   var errorElementClass = '.bs-invalid-msg';
   var helpBlockClass = '.help-block';
@@ -27,13 +27,13 @@ angular.module('bootstrap.angular.validation').factory('simpleMessageService', [
   }
 
   return {
-    hideErrorMessage: function($formGroupElement) {
-      $formGroupElement.removeClass('has-error');
+    hideErrorMessage: function($element, $formGroupElement) {
+      validationService.removeErrorClass($formGroupElement);
       $formGroupElement.findAll('span.' + errorClasses.join('.')).addClass('ng-hide');
     },
 
     resolveMessage: function($element, $attr, key) {
-      return bsValidationService.resolveMessage($element, $attr, key);
+      return validationService.resolveMessage($element, $attr, key);
     },
 
     showErrorMessage: function($element, $attr, ngModelController, $formGroupElement) {

src/services/simple.message.service.js

@@ -0,0 +1,61 @@
+/* global document */
+
+'use strict';
+
+angular.module('bootstrap.angular.validation').factory('tooltipMessageService', ['$uibPosition', 'BsValidationService',
+function($uibPosition, validationService) {
+
+  var iconMarkup = '<i class="fa fa-exclamation-triangle fa-fw"></i>';
+
+  function getElementID($element) {
+    var id = $element.attr('id');
+
+    if (id) {
+      return id;
+    }
+
+    id = 'bs-' + (Math.floor(Math.random() * 10000)) + '-' + Math.floor(Math.random() * 10000);
+    $element.attr('id', id);
+    return id;
+  }
+
+  function getErrorTooltipID($element) {
+    return 'bs-error-' + getElementID($element);
+  }
+
+  function getErrorTooltip($element) {
+    var tooltipID = getErrorTooltipID($element);
+    return angular.element(document.getElementById(tooltipID));
+  }
+
+  return {
+    hideErrorMessage: function($element, $formGroupElement) {
+      validationService.removeErrorClass($formGroupElement);
+      getErrorTooltip($element).removeClass('in');
+    },
+
+    resolveMessage: function($element, $attr, key) {
+      return validationService.resolveMessage($element, $attr, key);
+    },
+
+    showErrorMessage: function($element, $attr, ngModelController, $formGroupElement) {
+      var firstErrorKey = Object.keys(ngModelController.$error)[0];
+      var message = this.resolveMessage($element, $attr, firstErrorKey);
+
+      var tooltipID = getErrorTooltipID($element);
+      var $errorTooltip = getErrorTooltip($element);
+
+      if (!$errorTooltip || !$errorTooltip.length) {
+        angular.element('body').append('<div class="tooltip has-error" id="' + tooltipID + '" role="tooltip"' +
+          '><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>');
+
+        $errorTooltip = getErrorTooltip($element);
+      }
+
+      var ttPosition = $uibPosition.positionElements($element, $errorTooltip, 'bottom-left', true);
+      $errorTooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px' });
+      $errorTooltip.findOne('.tooltip-inner').html(message);
+      $errorTooltip.addClass('in').addClass(ttPosition.placement);
+    }
+  };
+}]);