在自定义事件上启用angular-ui工具提示

Question

我正在尝试使用angular-ui的工具提示功能向我的用户显示特定字段无效但似乎工具提示只能在某些预定义的触发器上显示.除了那些触发器之外,我有什么办法可以触发工具提示吗？

例如:

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-trigger="myForm.username.$invalid">

Answer 1

这是一个技巧.

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$ $无效时,tooltip-trigger表达式将评估为,'mouseenter'并且工具提示将显示.否则,触发器将评估'never'哪个不会启动工具提示.

编辑:

@cotten(在评论中)提到了工具提示卡住的情况,即使模型有效也不会消失.当输入文本时鼠标停留在输入字段上(并且模型变为有效)时会发生这种情况.模型验证评估为true后,tooltip-trigger将切换为"never".

UI Bootstrap使用所谓的triggerMap来确定显示/隐藏工具提示的鼠标事件.

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

正如您所看到的,此地图对"从不"事件一无所知,因此无法确定何时关闭工具提示.因此,为了很好地完成特技播放,我们只需要使用我们自己的事件对更新此映射,然后UI Bootstrap将知道当tooltip-trigger设置为"never" 时要关闭工具提示时要观察的事件.

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur',
    'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
  });
}]);

PLUNKER

_{注意:$ tooltip提供程序由"ui.bootstrap.tooltip"模块公开,它允许我们在应用程序配置中全局配置我们的工具提示.}

Answer 2

我尝试了不同的东西

tooltip="{{(myForm.input1id.$invalid) ? 'You have an error with this field' : ''}}"

这样,我的工具提示只有在输入无效时写入的内容,如果没有写入任何内容,则工具提示不会显示.

Answer 3

从版本0.12.0开始,tooltip-tigger不再可观察(因此您无法以编程方式更改它).

您可以使用它tooltip-enable来获得相同的行为.请在此处查看更多详细信息:https://github.com/angular-ui/bootstrap/issues/3372

Answer 4

You can also add the tooltip-enable instead of the tooltip-trigger on your field.

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-enable="{{myForm.username.$invalid}}">

In this case if the username is invalid ($invalid returns true) the tooltip will appear.