在自定义事件上启用 angular-ui 工具提示 [英] Enable angular-ui tooltip on custom events

问题描述

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

I am trying to use angular-ui's tooltip functionality to show my user that a particular field is invalid but it seems that the tooltip can be shown only on some pre-defined triggers. Is there any way by which I can trigger the tooltip except those triggers?

例如:

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

推荐答案

这是一个技巧.

Twitter Bootstrap 工具提示(Angular-UI 依赖)有一个选项使用 data-trigger="mouseenter" 中的附加属性指定触发事件.这为您提供了一种以编程方式更改触发器的方法(使用 Angular):

Twitter Bootstrap tooltips (that Angular-UI relies upon) have an option to specify the trigger event with an additional attribute as in data-trigger="mouseenter". This gives you a way of changing the trigger programmatically (with 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' 作为回报，它不会触发工具提示.

So when username is $invalid, the tooltip-triggerexpression will evaluate to 'mouseenter' and tooltip will show up. Otherwise, the trigger will evaluate to 'never' which in return won't fire up the tooltip.

@cotten(在评论中)提到了一个场景，即使模型有效，工具提示也不会消失.当输入文本时鼠标停留在输入字段上(并且模型变得有效)，就会发生这种情况.一旦模型验证评估为真，tooltip-trigger 将切换为从不".

@cotten (in comments) mentions a scenario where tooltip gets stuck and won't go away even when model is valid. This happens when mouse stays over the input field while the text is being entered (and model becomes valid). As soon as model validation evaluates to true, the tooltip-triggerwill switch to "never".

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

UI Bootstrap uses a so called triggerMap to determine on which mouse events to show/hide the tooltip.

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

如您所见，此地图对从不"事件一无所知，因此无法确定何时关闭工具提示.因此，为了更好地进行特技播放，我们只需要使用我们自己的事件对更新此地图，然后 UI Bootstrap 将知道当 tooltip-trigger 设置为从不".

As you may see, this map knows nothing about the "never" event, so it's unable to determine when to close the tooltip. So, to make out trick play nicely we only need to update this map with our own event pair and UI Bootstrap will then know what event to observe for closing the tooltip when tooltip-trigger is set to "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 provider 由ui.bootstrap.tooltip"模块公开，它允许我们在应用配置中全局配置我们的工具提示.}

这篇关于在自定义事件上启用 angular-ui 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！