Hide angular-ui tooltip on custom event

Question

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?

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/

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

You can just change the tooltipProvider trigger map to include `'mouseenter': 'mouseleave click'`. See: http://stackoverflow.com/a/23388638/1455709 — Patrick, Apr 30 '14 at 13:14

score 6 · Accepted Answer · answered May 09 '14 at 18:34

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>

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

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

score 4 · Answer 2 · answered Jan 23 '14 at 17:35

Basically you cannot play with the tooltip-trigger to make this work. After digging through the ToolTip directive code, I found that the ToolTip attribute exposes a scope attribute called tt_isOpen.

So in your ng-click function, if you set this attribute to false, that will make the tooltip hide.

See the updated demo here

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

Like this

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

In this example: Why does the .controller sit OUTSIDE of var app = angular.module('someApp', ['ui.bootstrap']); ? — Danny Mahoney, Mar 15 '16 at 23:48

score 4 · Answer 3 · answered Sep 30 '14 at 20:32

Michael's solution got me 90% of the way there but when I executed the code, angular responded with "$digest already in progress". I simply wrapped the trigger in a timeout. Probably not the best solution, but required minimal code

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

score 1 · Answer 4 · answered Aug 20 '15 at 07:21

For future reference, the accepted answer angular.element('.yourTooltip').scope().tt_isOpen will not work in new versions as tooltip has been made unobservable. Therefore, the entire tootlip is removed from DOM. Simple solution is to just check if tooltip is present in DOM or not.

Borrowing from @liteflier's answer,

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

Hide angular-ui tooltip on custom event

4 Answers4

Linked