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

【问题标题】：Angular tooltip should stay open when hovered悬停时角度工具提示应保持打开状态
【发布时间】：2014-04-01 06:40:09
【问题描述】：

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

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

编辑：不久前 JQUERY 也出现了同样的问题，请参见此处： Jquery tooltip that stays open on hover

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

【问题讨论】：

只是为了澄清，工具提示是指 angular-ui/bootstrap 工具提示？
这个：stackoverflow.com/questions/16651227/… 可以帮助你找出答案
谢谢你，但是我已经读了好几遍了，但没有得到提示这个 tooltipProvider 如何与那些 triggerMap 一起工作以实现我想要的：使用“悬停”触发/显示并使用“鼠标离开”隐藏你说的那个例子有一个将被调用的函数 - 我不知道我是否可以避免或需要这个函数。我希望即使悬停，工具提示也会保持打开状态

标签： javascript html css angularjs tooltip

【解决方案1】：

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

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

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

角度指令保持工具提示打开，直到我们移出范围，也就是直到我们将鼠标移开。

.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');
                 });
              }
           }
        })

【讨论】：