Question

我有一个需要密码的模态窗口。如果输入为空则会出现错误，我想在出现错误时显示工具提示

<input type='password' class='form-control' id='password' ng-model='user.password' uib-tooltip='{{error_msg}}' tooltip-placement='right' tooltip-trigger='none' tooltip-is-open='true' tooltip-class='tooltip_error' tooltip-enable='{{error}}' autofocus>

目前，如果没有错误，则根本不显示工具提示。一旦出现错误，它将显示错误消息，但我必须将鼠标悬停在文本框上以显示工具提示。与此同时，我已将tooltip-is-open设置为true以对其进行测试，但目前无效。

有什么想法吗？

Answer 1

从interpolation operators({{}})指令中删除tooltip-enable以使其正常工作，因为它指向scope属性。

更改您的代码，如：

<input type='password' class='form-control' id='password' ng-model='user.password' uib-tooltip='tootltip text : {{error_msg}}' tooltip-placement='right' tooltip-trigger='none' tooltip-is-open='true' tooltip-class='tooltip_error' tooltip-enable='error' autofocus>

更新：uib-tooltip指令将文本作为输入，因此我们需要将插值运算符放入其中。 Read more

请参阅此plunker

Answer 2

我的项目仍在运行AngularJS。

我们对所有依赖项进行了重大更新，并注意到这是一个问题。

"angular": "1.7.8",
"angular-ui-bootstrap": "2.5.6",

自从升级以来，我们最近注意到uib-tooltip不在鼠标悬停时或在tooltip-enable设置为true时未显示。不管我从他们的网站上找到了什么指示或其他stackoverflow答案，我都无法显示它们。调试时，我可以暂停脚本，然后将uib-tooltip-popup添加到DOM中，但默认情况下其不透明度为0。该元素似乎缺少“ .active”类，我认为该类将不透明度更改为.9或1。

为了快速解决，我只添加了.less规则。

div[uib-tooltip] {
 &:hover + div[uib-tooltip-popup]{
 opacity: 0.9 !important;
 }
}

div[uib-tooltip-html] {
 &:hover + div[uib-tooltip-html-popup]{
 opacity: 0.9 !important;
 }
}

这些工作适用于tooltip和tooltip-html。但是，它们仅在您未将其添加到主体（tooltip-append-to-body）时才起作用。默认情况下，tooltip popup元素作为同级添加到uib-tooltip中（至少在angularjs中），因此是同级规则。

AngularJS工具提示工具提示打开无法正常工作

2 个答案: