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;">

enter image description here

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?

Are other tooltips working on the page? I can only guess you don't have the proper js/css included on the page. — Scott
– Scott, Commented Jan 23, 2015 at 18:14
@Scott short answer yes. I have one another but that is not with an expression. it is a direct one. with no expression. — batmaniac7
– batmaniac7, Commented Jan 23, 2015 at 18:20

Scott · Accepted Answer · 2015-01-23 19:01:33Z

0

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";
            }
  };

answered Jan 23, 2015 at 19:01

Scott

1,6904 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

batmaniac7 Over a year ago

Yes. you are right. it is not made to work with true/false. The problem i was having was that the tooltip only works on focus, blur, mouseenter, mouseleave and only then the tooltip is displayed and not just on expression. So, it works in few cases and not other times. Thanks for the input though.

Collectives™ on Stack Overflow

Angular: Tooltip not showing up

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related