Is there any way to close Angular UI tooltip by clicking outside it?

In order to get this ability i have extended tooltip provider.

function customTooltip($document, $tooltip) {
    var tooltip = $tooltip('customTooltip', 'customTooltip', 'click'),
        parentCompile = angular.copy(tooltip.compile);

    tooltip.compile = function (element, attrs) {
        var parentLink = parentCompile(element, attrs);

        return function postLink(scope, element, attrs) {
            var firstTime = true;

            parentLink(scope, element, attrs);

            var onDocumentClick = function () {
                if (firstTime) {
                    firstTime = false;
                } else {
                    element.triggerHandler('documentClick');
                }
            };

            var bindDocumentClick = function () {
                $document.on('click', onDocumentClick);
            };

            var unbindDocumentClick = function () {
                $document.off('click', onDocumentClick);
            };

            scope.$watch('tt_isOpen', function (newValue) {
                firstTime = true;

                if (newValue) {
                    bindDocumentClick();
                } else {
                    unbindDocumentClick();
                }
            });

            scope.$on('$destroy', function onTooltipDestroy() {
                unbindDocumentClick();
            });
        };
    };

    return tooltip;
}

But this approach doesn't work already because there is no tt_isOpen property in scope now. Actually i can't see any of tooltip properties just only my parent scope. I guess this happend because of changes in tooltip.js 124 line https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js#L124. Is there any way now to close tooltip by clicking outside it or at least to get isOpen flag?

Answers


There is a pull request that implements an outsideClick trigger for tooltips and popovers. It will be included in angular-ui 1.0.0, which is expected to be released by the end of the year. Once it is implemented, you will be able to simply add tooltip-trigger="outsideClick" to your element.


There is an open pull request Here to add this feature. A hack workaround you can try is to disable then enable the trigger element as the directive will call this method:

        attrs.$observe( 'disabled', function ( val ) {
          if (val && ttScope.isOpen ) {
            hide();
          }
        });

This variant works on angular 1.3.15 and angular-ui version 0.13

function customTooltip($document, $tooltip) {
    var tooltip = $tooltip('customTooltip', 'customTooltip', 'click'),
        parentCompile = angular.copy(tooltip.compile);

    tooltip.compile = function (element, attrs) {

        var parentLink = parentCompile(element, attrs);

        return function postLink(scope, element, attrs) {

            parentLink(scope, element, attrs);

            var isOpened = false;

            element.bind('click', function () {
                bindDocumentClick();
            });

            var onDocumentClick = function () {
                if (!isOpened) {
                    isOpened = true;
                } else {
                    element.triggerHandler('documentClick');
                    unbindDocumentClick();
                    isOpened = false;
                }
            };

            var bindDocumentClick = function () {
                $document.on('click', onDocumentClick);
            };

            var unbindDocumentClick = function () {
                $document.off('click', onDocumentClick);
            };

            scope.$on('$destroy', function onTooltipDestroy() {
                unbindDocumentClick();
            });
        };
    };

    return tooltip;
}

Need Your Help

How do I handle __doPostBack() in Greasemonkey?

javascript asp.net function greasemonkey dopostback

There are a series of links handled by that function that contain what I need and I'm trying to use Greasemonkey to save the content inside those links.

Use jQuery .trigger to call a custom function that returns a value

jquery

Is there any way using jQuery's .bind() and .trigger() calls to execute a user defined function (ex: save ()) and act upon the return from the method? For example: