Question

所以我的模板上有一个按钮，工具提示提供了一些关于按钮的额外信息。我希望当鼠标悬停在按钮上时显示工具提示，然后在单击按钮时消失。单击该按钮会加载一个单独的视图。

目前我有它所以工具提示出现在悬停状态，但问题是工具提示在点击按钮后仍然存在。由于按钮不再是当前视图的一部分，因此工具提示会在消失之前跳到屏幕的上角几秒钟。我希望它在点击按钮时消失。

到目前为止，我已经尝试了两件事来解决问题，但这两件事都没有起作用：

我尝试包装JS函数，在$ timeout中打开一个新视图，希望工具提示在新视图加载之前消失。
我尝试将工具提示触发器更改为“点击”，但现在当鼠标悬停在工具提示上时，工具提示不会出现。单击按钮后会出现，并保持不变直到重新加载视图。

这是我的代码，其中包括上面提到的两次失败尝试：

的test.html：

<a class="the-button" ng-click="loadNewView($event)"
                             uib-tooltip-html="getToolTipInfo($event)"
                             tooltip-trigger="'click'"
                >
                 Click Me!
             </a>

Test.js：

ctrl.loadNewView = function($event) {
      $timeout(function($event) {      //timeout
          SystemViews.openNewView(ctrl.newView);
      });
    };

是否可以为这样的工具提示设置单独的触发器？如果没有，在加载新视图之前，我可以确保工具提示消失的另一种方法是什么？

非常感谢你提供任何你愿意传授的智慧。

Answer 1

最简单的解决方案是在更改视图之前隐藏工具提示。如果通过单击锚点触发工具提示，则可以模拟loadNewFunction函数中的单击以隐藏它。

的test.html：

<a id="the-button" ng-click="loadNewView($event)" uib-tooltip-html="getToolTipInfo($event)" tooltip-trigger="'click'">Click Me!</a>

Test.js

ctrl.loadNewView = function($event) {
  angular.element('#the-button').trigger('click');
  SystemViews.openNewView(ctrl.newView);
};

也许this answer可能会让您感兴趣，因为它涉及一个非常相似的问题。

Answer 2

我找到了解决方案（对我来说，至少）。我了解到，如果按空格分隔，可以有多个触发器。对于我的解决方案，我使用了值：

tooltip-trigger ='mouseenter click'。

这样，当我鼠标悬停时它总是打开，当我点击时它会关闭。

的test.html：

<a class="the-button" ng-click="loadNewView($event)"
                             uib-tooltip-html="getToolTipInfo()"
                             tooltip-trigger="'mouseenter click'
                >
                 Click Me!
             </a>

Test.js：

ctrl.loadNewView = function() {
       SystemViews.openNewView(ctrl.newView);
    };

希望其他人认为这有用！

在Angular中，是否可以有一个触发器显示工具提示，另一个触发器消失？

2 个答案: