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

一尘不染

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

angularjs

我一直在环顾四周，尝试各种不同的方法，但无法解决。是否可以在特定事件下隐藏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时关闭工具提示吗？

阅读 231

2020-07-04

共1个答案

一尘不染

我尝试了@ 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指令的实际内部结构，因此您没有先前解决方案的讨厌的副作用。

2020-07-04