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

【问题标题】：Enable angular-ui tooltip on custom events在自定义事件上启用 angular-ui 工具提示
【发布时间】：2013-05-15 02:41:06
【问题描述】：

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

例如：

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

【问题讨论】：

[QuantumUI tooltip ](angularui.net) by angularui.net 有一些更灵活的选项。

标签： angularjs angularjs-directive angular-ui

【解决方案1】：

这是一个技巧。

Twitter 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（在 cmets 中）提到了工具提示卡住并且即使模型有效也不会消失的情况。当输入文本时鼠标停留在输入字段上时会发生这种情况（并且模型变为有效）。一旦模型验证评估为真，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
  });
}]);

PLUNKER

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

【讨论】：

这个答案应该被接受，并且示例确实添加到了工具提示详细信息页面。
我无法让它工作。请参阅：jsbin.com/ekeset/1/edit。当表单有效时，工具提示不会消失...
“工作”的 jsbin 已停止工作，这是一个演示它的 plnkr。 plnkr.co/edit/s8tkXVji4UK0AZaUC1vK?p=preview
这很聪明，但它似乎并没有像用户期望的那样工作。他们必须模糊该字段，然后专注于查看他们的错误消息，并且通过鼠标悬停他们必须将鼠标悬停在该字段上以查看问题所在。如果我们能够定义自定义触发器，我们就可以在需要时显示错误消息（例如脏 && 无效）。
同意@DominicWatson。理想情况下，一旦用户离开该字段（或以其他方式移除焦点），工具提示就会出现。一旦错误被纠正，它就会自动隐藏（这次在字段内，应该不需要标签）。其他任何事情都是不直观的。我们可以完成这项工作吗？

【解决方案2】：

我尝试了一些不同的东西

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

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

【讨论】：

如果你将它与正确的 popover-trigger 事件配对，效果会非常好。例如，我正在验证文本输入，因此 keyup 甚至会强制弹出窗口重新评估每个 keyup 事件。我首先尝试了“焦点”，但只有当我点击退出时才会出现错误消息，然后才出现在元素中。 <input type="text" class="form-control" id="tax_id" name="tax_id" ng-maxlength="9" ng-minlength="9" ng-model="taxId" popover="{{(newApplication.tax_id.$error.maxlength) ? 'Please enter a 9 digit number' : ''}}" popover-trigger="keyup" required>

【解决方案3】：

从 0.12.0 版开始，tooltip-tigger 不再可观察（因此您无法通过编程方式更改它）。

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

【讨论】：

【解决方案4】：

您还可以在字段中添加tooltip-enable 而不是tooltip-trigger。

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

在这种情况下，如果用户名无效（$invalid 返回true），则会出现工具提示。

【讨论】：

这比公认的答案更简单、更易读，也更接近 OPs 原始代码

【解决方案5】：

根据新版本文档，我建议在 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"

你可以走了。

【讨论】：