Question

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

例如：

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

Answer 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 $ $无效时，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设置为“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

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

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

如果用户名无效（$ invalid返回true），则会显示工具提示。

Answer 5

根据新版本文档，我建议在HTML下面使用。 stewie的回答对最新版本没有帮助。

<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"

你很高兴。

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

5 个答案: