angularjs - UI Bootstrap - how to stop tooltip showing changed text before closing -


i have tooltip working on glyphicon. when click on glyphicon want hide tooltip, , change text of tooltip. reflects change in state glyphicon has been clicked.

however, when hide tooltip , change text of tooltip, instead of doing in order, second can see new text in tooltip before disappears.

here html:

<span class="glyphicon glyphicon-eye-open watch-eye"     ng-click="eyeclicked()" uib-tooltip="{{watchtooltip}}"     tooltip-placement="auto top" tooltip-is-open="eyetooltipisopen"> </span> 

and here javascript:

$scope.watchingcategory = false; $scope.watchtooltip = 'watch';  $scope.eyeclicked = function() {      $scope.eyetooltipisopen = !$scope.eyetooltipisopen;     $scope.watchingcategory = !$scope.watchingcategory;      if($scope.watchingcategory === true) {         $scope.watchtooltip = 'dont watch';     }     else if($scope.watchingcategory === false) {         $scope.watchtooltip = 'watch';     } }; 

i've created plnkr show how working: http://plnkr.co/edit/myqlkkisno14td21dv0m

any ideas how stop behaviour? appreciated...

this problem whitin uib directive.

a timeout solves problem :

 $timeout(function(){         $scope.watchtooltip = $scope.watchingcategory ?  'dont watch' : 'watch';     }, 200); 

http://plnkr.co/edit/myqlkkisno14td21dv0m?p=preview


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -