Angular: Tooltip not showing up

Question

This is the generated DOM:

<input class="form-control col-md-11 input ng-scope ng-animate ng-dirty ng-valid-required ng-invalid ng-invalid-minlength" type="password" value="" placeholder="*******" ng-model="user.confirmpassword" required="required" maxlength="80" autocomplete="off" ng-minlength="6" tooltip="Passwords do no match" tooltip-trigger="true" tooltip-placement="right" style="-webkit-transition-timing-function: initial, initial; transition-timing-function: initial, initial; -webkit-transition-delay: initial, initial; transition-delay: initial, initial;">

In the HTML:

<div class="col-md-9 text-left"><input class="form-control col-md-11 input" type="password" Value="" placeholder="*******" ng-model="user.confirmpassword" required="required" maxlength="80" autocomplete="off" ng-minlength="6" tooltip="Passwords do no match" tooltip-trigger="{{user.password !== user.confirmpassword}}" tooltip-placement="right"></div>

The tooltip-trigger is true but still no sign of tooltip. Anything, I am doing wrong?

Answer 1

I believe tooltip-trigger was not meant to be a true/false but rather an event. A quick test with true/false doesn't seem to work. A much simpler solution would be something like this.

  <input ng-model="password" tooltip="{{theTooltip()}}">
  <input ng-model="matchPassword" tooltip="{{theTooltip()}}">

  $scope.password;
  $scope.matchPassword;
  $scope.theTooltip = function() {
            if($scope.password == $scope.matchPassword) {
                return "matching";
            } else {
                return "not matching";
            }
  };