0

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

我想要实现的是排除工具提示出现，除了作为最后一个出现的提示。有时会出现太多的工具说明，从而无法阅读所需的（= 最后一个）工具。

我对 $watch 和 $observe 之类的东西很陌生，但据我所知，如果我想用 {{ }} 括号观察属性/属性等其他东西，我应该使用 $watch。

请查看我的 plunckr (script.js) 以了解我的指令到目前为止所取得的成就： http ://plnkr.co/edit/oaiJaQDCfrrfnscf8Y12?p=catalogue

它定义了一种创建工具提示的特殊方法，因为它从控制器中组装出 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 的情况下执行此操作，一种方法是将所有工具提示注册到服务：

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 回答