twitter-bootstrap 带有 Bootstrap 3 和 angular 的条件工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21177176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Conditional tooltip with Bootstrap 3 and angular
提问by boatcoder
So I can get tooltips to appear on field focus, but I only want them to sometimes. I want to add a manual trigger, but to say the docs are lacking would be to indicate that some exist. Here's what I've found so far (in the source)
所以我可以让工具提示出现在现场焦点上，但我只希望它们有时出现。我想添加一个手动触发器，但要说缺少文档将表明存在一些文档。这是我到目前为止发现的（在源代码中）
// 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 );
};
So, how do you write one of these triggers?
那么，您如何编写这些触发器之一呢？
回答by David
if you are still searching for a solution it might be handy to know that the tooltips only show when there is a text value, otherwise they don't actually show.
如果您仍在寻找解决方案，那么知道工具提示仅在有文本值时才显示可能会很方便，否则它们实际上不会显示。
I myself use the popover directive, here is a plunker where you can edit your text. When you clear the field, the tooltip won't show.
我自己使用 popover 指令，这里有一个 plunker，您可以在其中编辑文本。当您清除该字段时，工具提示将不会显示。
http://plnkr.co/edit/Zdkyhc90qTZFzLEwtrVL?p=preview
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>
And in the controller you just set the error initial value. Make sure you include 'ui.bootstrap' as a dependency for your app, else it won't work.
在控制器中，您只需设置错误初始值。确保包含“ui.bootstrap”作为应用程序的依赖项，否则它将无法工作。
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.error = 'Something went wrong';
});
回答by CAK2
AngularJS 1.5.7 and Bootstrap 3.3.6 support uib-tooltip-html properties on input, select and textarea elements. Unlike uib-tooltip properties, uib-tooltip-html properties support expressions. You should be able to express your conditions therein.
AngularJS 1.5.7 和 Bootstrap 3.3.6 支持 input、select 和 textarea 元素上的 uib-tooltip-html 属性。与 uib-tooltip 属性不同， uib-tooltip-html 属性支持表达式。您应该能够在其中表达您的条件。
For example, here is a date of birth textbox with an expression that either names the field when valid OR explains the validation error:
例如，这里是一个带有表达式的出生日期文本框，该表达式要么在有效时命名该字段，要么解释验证错误：
<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" />With a little more work you could explain the min and max date errors as well.
通过更多的工作，您还可以解释最小和最大日期错误。
回答by Kane
回答by Arun
we can use popover-enable property to show it conditional
我们可以使用 popover-enable 属性来有条件地显示它
