57

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

例如：

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

5 回答 5

108

这是一个技巧。

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$invalid 时，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设置为“从不”时关闭工具提示要观察什么事件。

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”模块公开，它允许我们在应用程序配置中全局配置我们的工具提示。

于 2013-05-20T15:38:13.873 回答
32

我尝试了一些不同的东西

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

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

于 2014-05-29T14:48:56.273 回答
9

从 0.12.0 版本开始，tooltip-tigger不再可观察（因此您不能以编程方式更改它）。

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

于 2015-03-10T17:14:48.783 回答
4

您也可以在您的字段上添加tooltip-enable而不是。tooltip-trigger

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

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

于 2016-07-13T09:13:21.330 回答
1

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

你已准备好出发。

于 2016-10-17T09:05:38.017 回答