具有Bootstrap 3和角度的条件工具提示

boa*_*der 10 twitter-bootstrap angularjs twitter-bootstrap-3

所以我可以将工具提示显示在场焦点上,但我有时只想要它们.我想添加一个手动触发器,但是说缺少的文档将表明某些存在.这是我到目前为止所发现的(在源头)

// Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};
Run Code Online (Sandbox Code Playgroud)

...

/**
 * This allows you to extend the set of trigger mappings available. E.g.:
 *
 *   $tooltipProvider.setTriggers( 'openTrigger': 'closeTrigger' );
 */
this.setTriggers = function setTriggers ( triggers ) {
  angular.extend( triggerMap, triggers );
};
Run Code Online (Sandbox Code Playgroud)

那么,你如何编写其中一个触发器?

小智 6

如果你仍然在寻找解决方案,那么知道工具提示只在有文本值时才会显示,这可能很方便,否则它们实际上并不显示.

我自己使用popover指令,这是一个可以编辑文本的plunker.清除该字段时,工具提示将不会显示.

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

<body ng-controller="MainCtrl">
  <br/><br/>
  <input type="text" size="100" ng-model="error"/><br/><br/>
  <p class="btn btn-default" 
     popover="{{error}}" 
     popover-placement="right" 
     popover-trigger="mouseenter">Hover my error!</p>
</body>
Run Code Online (Sandbox Code Playgroud)

在控制器中,您只需设置错误初始值.确保包含'ui.bootstrap'作为应用程序的依赖项,否则它将无效.

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.error = 'Something went wrong';
});
Run Code Online (Sandbox Code Playgroud)