In Angular, Is it possible to have one trigger for a tooltip to appear, and another for it to disappear?

Question

So I have a button on my template, with a tooltip that gives some extra information about the button. I would like the tooltip to appear when the mouse hovers over the button, and then disappear when the button is clicked. Clicking the button loads a separate view.

Currently I have it so the tooltip appears on hover, but then the problem is that the tooltip sticks around after the button has been clicked. Since the button is no longer part of the current view, the tooltip jumps to the top corner of the screen for a few seconds before disappearing. I'd like it to disappear the moment the button is clicked.

So far I've tried two things to solve the problem, neither of which have worked:

1. I tried wrapping the JS function which opens a new view in $timeout, hoping that the tooltip would disappear before the new view loads.

2. I tried changing the tooltip-trigger to 'click', but now the tooltip won't appear when the mouse is hovering over it. It will appear once the button is clicked, and stay there until the view is re-loaded.

Here is my code, which includes the two failed attempts mentioned above:

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

Is it possible to have separate triggers for a tooltip like this? If not, what is another way that I can make sure the tooltip disappears before the new view is loaded?

Thank you very much in advance for any wisdom you'd be willing to impart.

Answer 1

The simplest solution is to hide the tooltip before changing view. If your tooltip is triggered by a click on your anchor, you can emulate a click in your loadNewFunction function to hide it.

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

Maybe this answer can interest you since it's about a very similar question.

Answer 2

I found the solution (for me, at least). I learned that you can have multiple triggers if you separate them by space. For my solution, I used the value:

tooltip-trigger='mouseenter click'.

That way it always turns on when I mouse-over, and turns off when I 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);
    };

Hope someone else finds this helpful!