在angularJS中一次显示多个工具提示

Question

如何禁用除鼠标悬停以外的所有其他工具提示？

我要达到的目标是，除了显示为最后一个的提示以外，不显示工具提示。 有时会出现过多的工具提示，导致无法读取所需的（最后一个）提示。

我是$ watch和$ observe之类的新手，但是据我了解，如果我想使用{{}}括号观察其他属性/属性，则应该使用$ watch。

请查看我的plunckr（script.js），以了解到目前为止我的指令实现了什么： http ://plnkr.co/edit/oaiJaQDCfrrfnscf8Y12?p=catalogue

它定义了一种特殊的方式来创建工具提示，因为它会从控制器中组装HTML，并将一些数据从其中放入HTML（例如名称，描述和图像）。

我想观察一个带有tt_isOpen属性的工具提示，并排除所有其他显示的提示。

所需的行为似乎来自“悬停”。 但是，如何确定工具提示窗口将保持打开状态多长时间？ 我希望将工具提示窗口悬停在其上方。 即使工具提示窗口不在触发它的区域（正在悬停的区域）所在区域的范围内，也可能吗？

Answer 1

您可以将Angular UI中的tooltip指令配置为基于自定义事件显示/隐藏。

这个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的情况下进行操作，一种方法是将所有工具提示注册到服务：

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

该服务可以跟踪所有工具提示，从那里您可以在正确的元素上触发正确的事件。

注意：tooltip指令希望将这些事件抛出到Angular $ digest循环之外，因此您无法使用ng-click或其他Angular构造触发弹出窗口。