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

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.