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

【问题标题】：Conditional tooltip with Bootstrap 3 and angular带有 Bootstrap 3 和角度的条件工具提示
【发布时间】：2014-01-17 03:14:39
【问题描述】：

所以我可以让工具提示出现在现场焦点上，但我只希望它们有时出现。我想添加一个手动触发器，但是说缺少文档将表明存在一些文档。这是我迄今为止发现的（在源代码中）

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

那么，您如何编写这些触发器之一？

【问题讨论】：

“我想添加一个手动触发器..” - 你到底是什么意思？你想达到什么目的？
我只需要在字段出现错误时提供工具提示。现在你可以触发焦点，点击等......他们谈论手动触发。我只是想知道该怎么做。
我想你想看看这个问题：Enable angular-ui tooltip on custom events.
您还在寻找解决方案吗？

标签： angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您仍在寻找解决方案，知道工具提示仅在有文本值时显示可能会很方便，否则它们实际上不会显示。

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

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

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

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

【讨论】：

【解决方案2】：

AngularJS 1.5.7 和 Bootstrap 3.3.6 在 input、select 和 textarea 元素上支持 uib-tooltip-html 属性。与 uib-tooltip 属性不同，uib-tooltip-html 属性支持表达式。您应该能够在其中表达您的条件。

例如，这是一个出生日期文本框，其表达式可以在有效时命名字段或解释验证错误：

<input id="dateOfBirth{{::vm.studentID}}"
			   name="dateOfBirth"
			   placeholder="Date of Birth"
			   uib-tooltip-html="myFormName.dateOfBirth.$valid ? 'Date of Birth' : myFormName.dateOfBirth.$error.required ? 'Date of Birth is required' : 'Date of Birth is not a valid date: mm/dd/yyyy'"
			   type="date"
			   class="form-control"
			   data-ng-model="vm.dateOfBirth"
			   data-ng-required="vm.editMode"
			   min="1920-01-01"
			   data-ng-max="vm.maxDateOfBirth"
			   tabindex="3" />

再做一些工作，您也可以解释最小和最大日期错误。

【讨论】：

【解决方案3】：

<label>
    Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
</label>

检查API doc的工具提示部分

【讨论】：

这是一个明智的建议。但是，如果里面有一个实际的答案，那么你需要详细说明一下，以使其更加明显。例如。解释代码片段实现了什么以及如何实现。就像现在一样，它非常接近被标记为“不是答案”。另外，请拨打tour。

【解决方案4】：

我们可以使用 popover-enable 属性来显示它的条件

【讨论】：

【解决方案5】：

这可以通过Angular Property binding 和引导元素的title 属性归档。在 Bootstrap 中，只有在为标题值提供了一些文本时，工具提示才会显示在 DOM 中。您要做的就是将属性或方法绑定到工具提示。这里 getTooltip() 应该返回工具提示或空字符串。

&lt;button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" [title]="getTooltip()"&gt;

【讨论】：