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

Question

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

例如:

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

Answer 1

这里有一个技巧。

推特 Bootstrap tooltips (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(在评论中)提到了一种情况，即使模型有效，工具提示也会卡住并且不会消失。当输入文本时鼠标停留在输入字段上(并且模型变得有效)时，就会发生这种情况。一旦模型验证评估为 true，tooltip-trigger 将切换为“never”。

UI Bootstrap 使用所谓的 triggerMap 来确定在哪些鼠标事件上显示/隐藏工具提示。

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

正如您所见，该 map 对“never”事件一无所知，因此无法确定何时关闭工具提示。因此，为了让技巧发挥得更好，我们只需要使用我们自己的事件对更新此 map ，然后 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
  });
}]);

PLUNKER

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