current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 1 down vote favorite

I am trying to change custom class on model change for angular ui tooltip.

This is what I am trying to achieve

  • if nothing is entered in text box, (when I focus) then it should show default tooltip as "required"
  • if I write something (that changes model's value), so it should change the tooltip text with new customClass

With my current implementation, it changes text but customClass gets applied only when I blur and focus again on text box.

I understand when it re-render the tooltip, it picks up new value of model and apply customClass

but in this case, how can I call tooltip's recreate method to re-render it on model change?

here is the code http://plnkr.co/edit/Q4j2372DOcQkrL3Dv0bi?p=preview

share|improve this question
up vote 1 down vote accepted

You can always force the refresh programmatically. Add $timeout *) to the controller and implement a function like this :

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.emailValue = '';

  $scope.evalToolTip = function() {
    var email = document.getElementById('email');
    $timeout(function() {
        email.blur();    
        email.focus();
    })
  }   

}]);

add a ng-keydown that triggers the above evalToolTip() function :

<input ng-keydown="evalToolTip()" id="email" name="email" type="text" ng-model="emailValue" tooltip="{{ emailValue === ''? 'required': 'pattern error'}}" tooltip-trigger="focus" tooltip-placement="bottom" class="form-control" tooltip-append-to-body="true" tooltip-class="{{ emailValue === ''? '': 'customClass'}}" />

forked plnkr -> http://plnkr.co/edit/Axsw8poJDrNaWw20ilxQ?p=preview

*) without $timeout we are in risk of simultaneity errors.

share|improve this answer
    
That works great! thanks. I used directive which check for form error and update tooltip plnkr.co/edit/XtHR4x0IKN7KQhmooRFo?p=preview – Rohan Chandane Aug 25 at 12:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.