show popover on input validation in angularjs

Question

i want to do input validation in angularjs. By showing a bootstrap popover(https://angular-ui.github.io/bootstrap/#/popover) on it when invalid. I cannot figure out how to trigger the popover.

 User name:
   <input type="text" name="userName" ng-model="user.name" popover="m here"  popover-trigger="myForm.userName.$error.required" required>

the [plunker] : http://plnkr.co/edit/PwgquZXzhacvyeKeBc2O?p=preview

Answer 1

To trigger a popover using custom conditions you have to use the $tooltipProvider

By default you can trigger the popover only for : mouseenter, mouseleave, click, focus,blur

So you have to define your custom triggers, something like what is shown here : http://plnkr.co/edit/0wEqzz?p=preview

 angular.module('myApp',['ui.bootstrap'])
  .config(['$tooltipProvider', function($tooltipProvider){
    $tooltipProvider.setTriggers({'customEvent': 'customEvent'});
 }]);

angular.module('myApp').controller('myController', ['$scope','$timeout',
  function($scope, $timeout) {
    $scope.fireCustomEvent = function() {
    $timeout(function() {
      $('#tooltipTarget').trigger('customEvent');
    }, 0);
}
}]);