Question

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

我想要实现的目的是排除工具提示的显示，除了显示为最后一个的工具提示。有时太多的工具会显示无法读取所需的（=最后一个）。

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

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

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

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

期望的行为似乎来自“悬停”。但是，如何确定工具提示窗口保持打开的时间长度？我希望在悬停在自身上时显示工具提示窗口。即使工具提示窗口位于触发区域（被悬停的区域）的区域之外，这是否可能？

Answer 1

您可以根据自定义事件从Angular UI配置工具提示指令以显示/隐藏。

This 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结构触发弹出窗口。

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

1 个答案: