我正在尝试使用 angular-ui 的工具提示功能向我的用户显示特定字段无效,但似乎工具提示只能在某些预定义的触发器上显示。除了那些触发器之外,有什么方法可以触发工具提示?
例如:
<input
type="text"
tooltip="Invalid name!"
tooltip-position="right"
tooltip-trigger="myForm.username.$invalid">
我正在尝试使用 angular-ui 的工具提示功能向我的用户显示特定字段无效,但似乎工具提示只能在某些预定义的触发器上显示。除了那些触发器之外,有什么方法可以触发工具提示?
例如:
<input
type="text"
tooltip="Invalid name!"
tooltip-position="right"
tooltip-trigger="myForm.username.$invalid">
这是一个技巧。
Twitter Bootstrap 工具提示(Angular-UI 所依赖的)有一个选项来指定带有附加属性的触发事件,如data-trigger="mouseenter"
. 这为您提供了一种以编程方式更改触发器的方法(使用 Angular):
<input
ng-model="user.username"
name="username"
tooltip="Some text"
tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}"
/>
因此,当username
$invalid 时,tooltip-trigger
表达式将计算为'mouseenter'
并显示工具提示。否则,触发器将评估'never'
哪个不会触发工具提示。
编辑:
@cotten(在评论中)提到了工具提示卡住并且即使模型有效也不会消失的情况。当输入文本时鼠标停留在输入字段上时会发生这种情况(并且模型变为有效)。一旦模型验证评估为真,tooltip-trigger
就会切换到“从不”。
UI Bootstrap 使用所谓triggerMap
的来确定在哪些鼠标事件上显示/隐藏工具提示。
// Default hide triggers for each show trigger
var triggerMap = {
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur'
};
如您所见,此地图对“从不”事件一无所知,因此无法确定何时关闭工具提示。因此,为了很好地发挥技巧,我们只需要使用我们自己的事件对更新此地图,然后 UI Bootstrap 将知道在tooltip-trigger
设置为“从不”时关闭工具提示要观察什么事件。
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
});
}]);
注意:$tooltip 提供程序由“ui.bootstrap.tooltip”模块公开,它允许我们在应用程序配置中全局配置我们的工具提示。
我尝试了一些不同的东西
tooltip="{{(myForm.input1id.$invalid) ? 'You have an error with this field' : ''}}"
这样,我的工具提示仅在输入无效时才写入内容,如果没有写入任何内容,则工具提示不会显示。
从 0.12.0 版本开始,tooltip-tigger
不再可观察(因此您不能以编程方式更改它)。
您可以使用tooltip-enable
来获得相同的行为。在此处查看更多详细信息:https ://github.com/angular-ui/bootstrap/issues/3372
您也可以在您的字段上添加tooltip-enable
而不是。tooltip-trigger
<input
type="text"
tooltip="Invalid name!"
tooltip-position="right"
tooltip-enable="{{myForm.username.$invalid}}">
在这种情况下,如果用户名无效($invalid 返回true
),则会出现工具提示。
根据新版本文档,我建议在 HTML 下面使用。斯图伊的回答对最新版本没有帮助。
<input class="form-control" name="name" type="text" required ng-model="name"
uib-tooltip="name required" tooltip-is-open="formname.name.$invalid"
tooltip-trigger="none" tooltip-placement="auto top" />
仅替换您的表单名称
tooltip-is-open="formname.name.$invalid"
你已准备好出发。