angularjs - 使用 Bootstrap 3 和 Angular 的条件工具提示

标签 angularjs twitter-bootstrap twitter-bootstrap-3

所以我可以让工具提示出现在字段焦点上,但我只希望它们有时出现。我想添加一个手动触发器,但说缺少文档就表明存在一些文档。这是我到目前为止发现的内容(在源代码中)

// Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};

...

/**
 * 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 );
};

那么,如何编写这些触发器之一?

最佳答案

如果您仍在寻找解决方案,那么了解工具提示仅在存在文本值时才显示可能会很方便,否则它们实际上不会显示。

我自己使用 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>

在 Controller 中您只需设置错误初始值。确保将“ui.bootstrap”作为应用程序的依赖项包含在内,否则它将无法工作。

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

app.controller('MainCtrl', function($scope) {
  $scope.error = 'Something went wrong';
});

关于angularjs - 使用 Bootstrap 3 和 Angular 的条件工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21177176/

相关文章:

angularjs - 如何刷新使用 AngularJS 中的 $resource 服务获取的本地数据

javascript - ng-click 不会执行

jquery - 选择表格行并使用 Twitter Bootstrap 保持突出显示

javascript - 我怎样才能用angularJS获得数据的东西属性

javascript - 使用 angularJS 和 jquery 的最佳方法 $ ('document' ).ready()

css - 设置导航栏的背景图片 - bootstrap

css - 设置 div 高度等于屏幕尺寸

css - Bootstrap 3 在移动设备上的菜单/导航栏中滑动

jquery - 使用 onClick 为动态按钮添加和删除类

jquery - 如何获取 Bootstrap 3 附加方法的动态数据偏移值