AngularJs tooltip初始化和淡出

Question

我使用 angular-ui 工具提示 (https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js) or angular strap tooltip (http://mgcrea.github.io/angular-strap/#/tooltips#tooltips)

我需要在出现某些事件或表达式时在元素上显示工具提示。

下面的例子，我们有输入。当 data.model.count == 5 时，我需要显示工具提示。然后隐藏超过 5 秒的工具提示。请帮助我！

<input type="text" ng-model="data.model">

Answer 1

写一个指令！ plunker

angular.module('ui.bootstrap.demo').directive('showTip', function($timeout){
  return {
    restrict: 'A',
    scope: {
      showTip: "="
    },
    link: function(scope, elm, attr){
      var tooltip;
      scope.$watch('showTip', function(newVal){
        if(newVal == 5){
          tooltip.css({visibility: 'visible'});
          $timeout(function(){
            tooltip.css({visibility: 'hidden'});
          }, 5000)
        }
      })

      elm.bind('DOMSubtreeModified', function(){
        tooltip = elm.find('div');
        tooltip.css({visibility: 'hidden'});
      })
    }
  }
});

AngularJs tooltip初始化和淡出

AngularJs tooltip initialization and fade out

angularjs

tooltip

angular-strap