0

マウスが上にあるツールチップ以外のすべてのツールチップを無効にするにはどうすればよいですか?

私が達成しようとしているのは、最後のツールチップとして表示されたものを除いて、ツールチップが表示されないようにすることです。ツールリップが多すぎて、必要な (= 最後の) ツールリップを読み取ることができない場合があります。

私は $watch や $observe のようなものは初めてですが、{{ }} ブラケットを使用して属性/プロパティなどの他のものを観察したい場合は、$watch を使用する必要があることを理解しています。

私のディレクティブがこれまでに達成したことを確認するには、私の plunkr (script.js) をご覧ください: http://plnkr.co/edit/oaiJaQDCfrrfnscf8Y12?p=catalog

コントローラーから HTML を組み立て、HTML からデータを (名前、説明、および画像として) 配置するときに、ツールチップを作成する特別な方法を定義します。

tt_isOpen 属性を持つツールチップを観察し、他のすべてを表示から除外したいと思います。

望ましい動作は「ホバー」から来ているようです。しかし、ツールヒント ウィンドウが開いたままになる時間をどのように判断できますか? ホバリング中にツールチップウィンドウが欲しいです。ツールチップ ウィンドウが、それがトリガーされた領域 (ホバリングされている領域) の場所の領域外にある場合でも、それは可能ですか?

4

1 に答える 1

0

Angular UIからツールチップ ディレクティブを構成して、カスタム イベントに基づいて表示/非表示にすることができます。

この Plnkrはまさにそれを行います。オープン/クローズ イベントを定義します。

app.config(function($tooltipProvider) {
   $tooltipProvider.setTriggers({'open':'close'});
});

tooltip-triggerディレクティブ (および追加のクラス)に属性を設定します。

<input type="text" value="Hover me!" tooltip="See? " tooltip-trigger="open" tooltip-placement="bottom" class="form-control has-tooltip" />

そして、ホバーと右の要素でこれらのイベントをトリガーします。

$('.has-tooltip').hover(function() {
  $('.has-tooltip').not(this).trigger('close');
  $(this).trigger('open');
});

JQuery を使用せずに実行したい場合、1 つの方法は、すべてのツールチップをサービスに登録することです。

angular.directive("hasTooltip",function (tooltipService) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            tooltipService.register(element);
        }
    }
});

このサービスはすべてのツールチップを追跡でき、そこから適切な要素で適切なイベントをトリガーできます。

注意: ツールチップ ディレクティブは、これらのイベントが Angular の $digest サイクルの外側でスローされることを想定しているため、ng-click やその他の Angular 構造でポップアップをトリガーすることはできません。

于 2014-02-27T18:05:13.337 に答える