在自定义事件上隐藏 angular-ui 工具提示 [英] Hide angular-ui tooltip on custom event

问题描述

我一直在环顾四周并尝试不同的东西，但无法弄清楚.是否可以隐藏带有特定事件的 angular-ui 工具提示?

I've been looking around and trying out different things but can't figure it out. Is it possible to hide an angular-ui tooltip with a certain event?

我想要做的是当有人将鼠标悬停在 div 上时显示一个工具提示，并在用户点击它时关闭它，因为我将显示另一个弹出窗口.我尝试使用自定义触发事件，但似乎无法正常工作.我做了这个:

What I want to do is to show a tooltip when someone hovers over a div and close it when a users clicks on it because I will show another popup. I tried it with custom trigger events but can't seem to get it working. I made this:

<div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites"     tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>

var app = angular.module('someApp', ['ui.bootstrap']);

app.config(['$tooltipProvider', function($tooltipProvider){
 $tooltipProvider.setTriggers({
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur',
  'hideonclick': 'click'
 });
}]);

app.controller('MainCtrl', function ($scope) {
 $scope.showTooltip = true;
 $scope.likes = 999;

 $scope.doSomething = function(){
    //hide the tooltip
    $scope.showTooltip = false;                                   
 };

})

http://jsfiddle.net/3ywMd/

工具提示必须在第一次点击而不是第二次点击时关闭.知道如何在用户点击 div 时关闭工具提示吗?

The tooltip has to close on first click and not the 2nd. Any idea how to close the tooltip if user clicks on div?

推荐答案

我尝试了@shidhin-cr 的设置 $scope.tt_isOpen = false 的建议，但它有一个相当重要的问题，虽然工具提示确实淡出，它仍然存在于 DOM 中(并处理指针事件！).因此，即使他们看不到它，工具提示也可以阻止用户与之前位于工具提示后面的内容进行交互.

I tried @shidhin-cr's suggestion of setting $scope.tt_isOpen = false but it had the rather significant issue that, while the tooltip does fade out, it is still present in the DOM (and handling pointer events!). So even though they can't see it, the tooltip can prevent users from interacting with content that was previously behind the tooltip.

我发现的一个更好的方法是简单地触发用作工具提示目标上的工具提示触发器的事件.因此，例如，如果您有一个作为工具提示目标的按钮，并在点击时触发...

A better way that I found was to simply trigger the event used as tooltip-trigger on the tooltip target. So, for example, if you've got a button that's a tooltip target, and triggers on click...

<button id="myButton"
        tooltip="hi"
        tooltip-trigger="click">
</button>

然后在您的 JavaScript 中，您可以随时触发 'click' 事件以关闭您的工具提示.在触发事件之前，确保工具提示实际上是打开的.

Then in your JavaScript, at any point, you can trigger the 'click' event to dismiss your tooltip. Make sure that the tooltip is actually open before you trigger the event.

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
    angular.element('#myButton').trigger('click');
}

由于这会触发 AngularUI 的 Tooltip 指令的实际内部结构，因此您不会有上一个解决方案的令人讨厌的副作用.

Since this triggers the actual internals of AngularUI's Tooltip directive, you don't have the nasty side-effects of the previous solution.

这篇关于在自定义事件上隐藏 angular-ui 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！