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);
Comments
Post a Comment