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

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

例如:

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-trigger="myForm.username.$invalid">
vivek asked 2019-10-09T18:12:23Z
5个解决方案
108 votes

这是一个把戏。

Twitter Bootstrap工具提示(Angular-UI依赖)具有一个选项,可以指定带有附加属性的触发事件,如2561999093065319419424所示。这为您提供了一种以编程方式(使用Angular)更改触发的方式:

<input 
  ng-model="user.username"
  name="username"
  tooltip="Some text" 
  tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" 
/>

因此,当tooltip-trigger $无效时,tooltip-trigger表达式的计算结果将为'mouseenter'858,并显示工具提示。 否则,触发器将评估为'never',作为回报,它将不会触发工具提示。

编辑:

@cotten(在评论中)提到了一种情况,即使模型有效,工具提示也会卡住并且不会消失。 当在输入文本时鼠标停留在输入字段上(并且模型变为有效)时,会发生这种情况。 一旦模型验证评估为true,2561999093098873873856将切换为“从不”。

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

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

如您所见,此地图对“从不”事件一无所知,因此无法确定何时关闭工具提示。 因此,要使技巧发挥出色,我们只需要使用我们自己的事件对来更新此映射,并且当2561999093098873873856设置为“从不”时,UI Bootstrap将知道要关闭工具提示时要观察哪个事件。

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur',
    'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
  });
}]);

朋克

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

Stewie answered 2019-10-09T18:13:22Z
32 votes

我尝试了不同的东西

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

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

Victor Ivens answered 2019-10-09T18:13:53Z
9 votes

从版本0.12.0开始,不再可以观察到tooltip-enable(因此无法以编程方式进行更改)。

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

Bruno answered 2019-10-09T18:14:24Z
3 votes

您也可以在字段中添加true而不是tooltip-trigger

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

在这种情况下,如果用户名无效($ invalid返回true),将显示工具提示。

Salma Hamed answered 2019-10-09T18:14:55Z
0 votes

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

你已准备好出发。

nirmal answered 2019-10-09T18:15:33Z
translate from https://stackoverflow.com:/questions/16651227/enable-angular-ui-tooltip-on-custom-events