Question

当使用“悬停”作为触发器时，如何实现工具提示（角度/引导UI）保持打开状态？

使用“mouseover”我会获得更好的行为（工具提示保持打开状态，直到我重新输入已分配工具提示的元素为止。）

编辑：前一段时间JQUERY也出现了同样的问题，请看这里： Jquery tooltip that stays open on hover

这正是我想用angular做的事情（因为我不能使用JQuery）。

Answer 1

请注意，如果使用Angular，则使用jQuery，因为jQuery是AngularJS依赖项。如果您的源代码中没有包含完整版本，则Angular会附带jQuery Lite。使用jQuery可以更容易clear the timeout of the tooltip。如果您想要纯粹的角度/ css解决方案，请参阅下文。

只要鼠标悬停在元素上，此处的工具提示应保持打开状态：http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

我在这里回答了类似的工具提示相关问题 - Angular UI Tooltip overflowing screen - 在这里，关于使工具提示动态化 - Angular + Bootstrap 2.3 - Dynamic tooltip。

angular指令保持工具提示打开，直到我们移出范围，直到我们移开鼠标。

.directive('tooltip', function () {
           return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                 $(element)
                         .attr('title', attrs.tooltip)
                         .tooltip({placement: attrs.placement});
                 scope.$on('$destroy', function() {
                    element.tooltip('destroy');
                 });
              }
           }
        })

悬停时，角度工具提示应保持打开状态

1 个答案: