Angularでは、ツールチップを表示するトリガーを1つ、消えるように1つのトリガーを付けることはできますか？

Question

私はテンプレートに関するいくつかの追加情報を提供するツールチップを使ってボタンを持っています。マウスがボタンの上を移動するとツールヒントが表示され、ボタンがクリックされると消えます。ボタンをクリックすると、別のビューが読み込まれます。

現在、私はそれを持っているので、ツールチップはホバー上に表示されますが、ボタンをクリックするとツールチップがスティックされるという問題があります。ボタンは現在のビューの一部ではなくなったので、ツールチップは画面の上隅に数秒間ジャンプしてから消えます。ボタンがクリックされた瞬間に消えてしまいたいです。

これまでのところ、私が働いているどちらも問題を解決するために二つのことを、試してみた：

1. 私はツールチップがあろうと期待して、$タイムアウトで新しいビューを開き、JS関数をラップしようとしました新しいビューが読み込まれる前に消えます。

2. 私はtooltip-triggerを 'click'に変更しようとしましたが、マウスがその上に乗っているときにツールチップが表示されなくなりました。ボタンがクリックされると表示され、ビューが再ロードされるまでそこにとどまります。

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

   はそれが可能です。ここ

は、2つの上記の試行失敗が含ま私のコードであり、このようなツールチップのために別々のトリガーを持っていますか？そうでない場合は、新しいビューが読み込まれる前にツールチップが消えることを確認する別の方法はありますか？

ご指摘いただきありがとうございます。

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'

こうすると、マウスオーバーすると常にオンになり、クリックするとオフになります。

試験。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); 
    }; 

希望他の誰かが、これは便利見つけました！