隐藏自定义事件角UI提示 [英] Hide angular-ui tooltip on custom event

问题描述

我一直在四处寻找和尝试不同的东西，但不能弄明白。是否有可能隐藏与特定事件的角度的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?

推荐答案

我试过@设置 $ scope.tt_isOpen = FALSE 的shidhin铬的建议，但它有相当，虽然没有提示淡出，这是显著问题依然美元的DOM p $ psent（和处理指针事件！）。因此，即使他们不能看到它时，提示可以从那是previously工具提示后面的内容进行交互prevent用户。

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的工具提示指令的实际内部，你没有previous解决方案的讨厌的副作用。

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

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