所以我可以让工具提示出现在字段焦点上,但我只希望它们有时出现。 我想添加一个手动触发器,但说缺少文档就是表明存在一些。 这是我到目前为止发现的(在源代码中)
// 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 );
};
那么,如何编写这些触发器之一呢?
如果您仍在搜索解决方案,那么知道工具提示仅在存在文本值时才显示可能会很方便,否则它们实际上不会显示。
我自己使用弹出指令,这是一个 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';
});
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" />
通过更多的工作,您也可以解释最小和最大日期错误。
<label>
Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
</label>
检查 API 文档的工具提示部分
我们可以使用弹出框启用属性来显示它的条件
可以通过 Angular 属性绑定和引导元素的 title 属性进行存档。在 Bootstrap 中,仅当为标题值提供了一些文本时,工具提示才会显示在 DOM 中。您需要做的是将属性或方法绑定到工具提示。这里 getTooltip() 应该返回工具提示或空字符串。
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" [title]="getTooltip()">