change tooltip class dynamically with angular ui tooltip

Question

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

davidkonrad · Accepted Answer · 2015-08-24 23:43:22Z

1

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.

edited Aug 24, 2015 at 23:43

answered Aug 24, 2015 at 20:05

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

Rohan Chandane Over a year ago

That works great! thanks. I used directive which check for form error and update tooltip plnkr.co/edit/XtHR4x0IKN7KQhmooRFo?p=preview

Collectives™ on Stack Overflow

change tooltip class dynamically with angular ui tooltip

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related