3

Ok, so I have an input field that i would like to enhance with 2 custom directives:

<input type="text" number-format validation-message="Only numeric values are valid!" class="form-control" id="num1" ng-model="num1" />

The first directive validates any input on the moment of entering text -> in this case I check for numbers with a regex: (this is actually working fine)

.directive('numberFormat', function() {
return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue) {
            var invalidNumber = /^[0-9]+$/.test(viewValue);
            if (invalidNumber || viewValue === ''){
              ctrl.$setValidity('numberFormat', true);
            } else {
              ctrl.$setValidity('numberFormat', false);
            }
        });
    }
};})

And then, I tought it might be useful to have a tooltip displayed saying that only numbers are valid for this input field. And i would like to show it in the moment of the validation failing. The 2nd directive that I have so far looks like this:

.directive('validationMessage', function () { 
return{
    restrict: 'A',
    template: '<input tooltip tooltip-placement="bottom" >',
    replace: true,
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {

      ctrl.$parsers.unshift(function(viewValue) {
        var valid = ctrl.$valid;
        if (valid) {
          attrs.$set('tooltip', "");
        } else {
          attrs.$set('tooltip', attrs.validationMessage);
          scope.tt_isOpen = true; // doesn't work!?
        }
        return viewValue;
      });
    }
};})

Well, basically it does work in the way, that the tooltip and tooltip-placement attributes are updated to the input element. But for some reason the tooltip is not shown immediately when the validity has failed (and the tooltip attribute with its text is set). The user needs to hover out and back in the input element by the mouse to see the tooltip.

I've created a plunker for a better visualisation of this behaviour: http://plnkr.co/edit/3QOiOom6VQm3cXAstB3j?p=info

I tried 'scope.tt_isOpen' but it does not seem to have any effect. What exactly am i missing to show the tooltip?

Many thanks for every tip.

deewee
  • 31
  • 1
  • 4
  • See [How to show form input errors using AngularJS UI Bootstrap tooltip?](http://stackoverflow.com/q/24726105/1064325) and [Show AngularJS Bootstrap Tooltip for client-side validation as soon as user leaves field](http://stackoverflow.com/q/26639314/1064325) – falsarella Mar 22 '15 at 00:15
  • You haven't triggered the tooltip, you simply added the tooltip to the dom. The hovering is what is triggering the tooltip. You need to code something to explicitly trigger the tooltip. – DavidA Apr 02 '15 at 16:49

1 Answers1

0

You can use:

tooltip-trigger="{{{true: 'keyup', false:'never'[myForm.inputName.$invalid]}}"

UI Bootstrap uses a so called triggerMap to determine on which mouse events to show/hide the tooltip.

// Default hide triggers for each show trigger
var triggerMap = {
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur'
};

app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'keyup': 'keydown',
'never': 'mouseleave' <- to make sure tooltip will go
});
}]);

You can specify your desired event to trigger the tooltip.

UserNeD
  • 1,409
  • 13
  • 14