diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js index f4119df19d4..869ada14952 100644 --- a/src/components/tooltip/tooltip.js +++ b/src/components/tooltip/tooltip.js @@ -92,6 +92,11 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe content.css('transform-origin', origin); } + function onVisibleChanged (isVisible) { + if (isVisible) showTooltip(); + else hideTooltip(); + } + function configureWatchers () { scope.$on('$destroy', function() { scope.visible = false; @@ -99,12 +104,30 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe angular.element($window).off('resize', debouncedOnResize); }); - scope.$watch('visible', function (isVisible) { - if (isVisible) showTooltip(); - else hideTooltip(); - }); + if (element[0] && 'MutationObserver' in $window) { + var attributeObserver = new MutationObserver(function(mutations) { + mutations + .forEach(function (mutation) { + if (mutation.attributeName === 'md-visible') { + if (!scope.visibleWatcher) + scope.visibleWatcher = scope.$watch('visible', onVisibleChanged ); + } + if (mutation.attributeName === 'md-direction') { + updatePosition(scope.direction); + } + }); + }); + + attributeObserver.observe(element[0], { attributes: true}); + + if (attr.hasOwnProperty('mdVisible')) // build watcher only if mdVisible is being used + scope.visibleWatcher = scope.$watch('visible', onVisibleChanged ); - scope.$watch('direction', updatePosition ); + } + else { // MutationObserver not supported + scope.visibleWatcher = scope.$watch('visible', onVisibleChanged ); + scope.$watch('direction', updatePosition ); + } } function addAriaLabel () { @@ -194,9 +217,15 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $mdUtil, $mdThe $timeout(function() { scope.visible = setVisible.value; setVisible.queued = false; + if (!scope.visibleWatcher) + onVisibleChanged(scope.visible); }, scope.delay); } else { - $mdUtil.nextTick(function() { scope.visible = false; }); + $mdUtil.nextTick(function() { + scope.visible = false; + if (!scope.visibleWatcher) + onVisibleChanged(false); + }); } } }