问题 在自定义事件上隐藏angular-ui工具提示


我一直在环顾四周,尝试不同的东西,但无法弄清楚。是否可以隐藏某个事件的angular-ui工具提示?

我想要做的是当有人在div上盘旋时显示工具提示,并在用户点击它时将其关闭,因为我将显示另一个弹出窗口。我尝试使用自定义触发器事件,但似乎无法使其正常工作。我做的:

<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,任何想法如何关闭工具提示?


8827
2017-11-01 15:58


起源

您只需更改tooltipProvider触发器映射即可包含 'mouseenter': 'mouseleave click'。看到: stackoverflow.com/a/23388638/1455709 - Patrick


答案:


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

我发现的一种更好的方法是简单地触发在工具提示目标上用作工具提示触发器的事件。所以,例如,如果你有一个工具提示目标的按钮,并点击触发......

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

然后在您的JavaScript中,您可以随时触发“点击”事件来关闭您的工具提示。在触发事件之前,请确保工具提示实际处于打开状态。

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

由于这会触发AngularUI的Tooltip指令的实际内部,因此您不会遇到先前解决方案的令人讨厌的副作用。


6
2018-05-09 18:34





基本上你不能玩 提示触发 使这项工作。在深入了解ToolTip指令代码后,我发现ToolTip属性公开了一个名为的范围属性 tt_isOpen

因此,在ng-click函数中,如果将此属性设置为false,则会隐藏工具提示。

请在此处查看更新的演示

http://jsfiddle.net/3ywMd/10/

喜欢这个

app.controller('MainCtrl', function ($scope) {
 $scope.likes = 999;
 $scope.doSomething = function(){
    //hide the tooltip
    $scope.tt_isOpen = false;
 };                                    
})

4
2018-01-23 17:35



谢谢,似乎工作! - Mikel Porras Hoogland
谢谢。它完美地运作。 - Satish Singh
在这个例子中:为什么.controller位于var app = angular.module('someApp',['ui.bootstrap'])的OUTSIDE之外; ? - Danny Mahoney


迈克尔的解决方案让我有90%的方式,但当我执行代码时,角度响应“$ digest已在进行中”。我只是将触发器包裹在超时中。可能不是最好的解决方案,但需要最少的代码

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

4
2017-09-30 20:32





供将来参考,接受的答案 angular.element('.yourTooltip').scope().tt_isOpen 由于工具提示已无法观察,因此无法在新版本中使用。因此,整个牙龈从DOM中移除。简单的解决方案是检查DOM中是否存在工具提示。

借用@ liteflier的回答,

// ... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('.yourTooltip').length) { //if element is present in DOM
    setTimeout( function(){
        //Trigger click on tooltip container
        angular.element('.yourTooltipParent').trigger('click');
    }, 100);
}

1
2017-08-20 07:21