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

Question

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

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

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

1. 我尝试在 $timeout 中包装打开新视图的 JS 函数，希望工具提示在新视图加载之前消失。

2. 我尝试将工具提示触发器更改为“单击”，但现在鼠标悬停在工具提示上时不会出现工具提示。单击按钮后它将出现，并一直停留在那里直到重新加载视图。

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

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);
    };

希望其他人觉得这有帮助！