feat(tooltip): Setting to show only single popup

src/tooltip/tooltip.js

@@ -91,6 +91,87 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
         };
       }
 
+      //if the child DOM element a descendent od the parent jqLite element
+      function isDescendent(parentElement, childDom) {
+        var isDescendentResult = false;
+        var el = parentElement.find(childDom.tagName);
+
+        for(var i=0; i<el.length; i++) {
+          if(el[i] == childDom) {
+            isDescendentResult = true;
+            break;
+          }
+        }
+        return isDescendentResult;
+      }
+
+      //If a given tooltip is visible, this method hides it
+      function hideTooltip(tooltip, popupElement, isDomEvent) {
+        //Tooltips width/height != 0 (i.e. it is displayed)
+        var w = tooltip.offsetWidth, h = tooltip.offsetHeight;
+
+        if (w !== 0 && h !== 0) {
+          //Hide it
+          if (isDomEvent) {
+            popupElement.scope().hideTooltipBind();
+          }
+          else {
+            popupElement.scope().hide();
+          }
+        }
+      }
+
+      /**
+       * Hides all popovers except for the current one.
+       * If the current element is not a popover or its child,
+       * this function will hide all popovers (example on body.click())
+       * Invoked from show() and from body.click()
+       */
+       function hideOthers(current) {
+           var isDomEvent = false;
+           if (current.target !== undefined) {
+               current = current.target;
+               isDomEvent = true;
+           }
+
+           //Find all elements with the popover attribute
+           var popups = document.querySelectorAll('*[popover]');
+           //Go through all of them
+           for (var i = 0; i < popups.length; i++) {
+               //The following is the popover DOM element
+               var popup = popups[i];
+               //The following is the same jQuery lite element
+               var popupElement = angular.element(popup);
+               //The following is the tooltips jQuery lite element
+               var tooltipElement = popupElement.scope().tooltip;
+               //The following is the toltip DOM element
+               var tooltip = tooltipElement[0];
+               //If the element clicked is a child of the current popover's tooltip
+               var isTooltipChild = isDescendent(tooltipElement, current);
+               //If the element clicked is a child of the current popover
+               var isPopoverChild = isDescendent(popupElement, current);
+
+               //If the following condition is met, then the click does not correspond
+               //to a click on the current popover in the loop or one of its children or its content.
+               //So, we can safely hide the current popover
+              if (
+                    popup != current &&    //The click was not on this popup
+                    !isPopoverChild &&      //And it was not on any child of this popup
+                    tooltip != current &&  //And it was not on this popups tooltip
+                    !isTooltipChild           //And it was not on any child of this popups tooltip
+              ){
+                hideTooltip(tooltip, popupElement, isDomEvent);  
+              }
+          }
+      }
+
+      //If mode is 'single' then bind to body click
+      var popoverMode = angular.isDefined(options.popoverMode) ? options.popoverMode : 'multi';
+      //If this is a popover and mode in options is set to single, then bind to body elements
+      if (type == 'popover' && popoverMode == 'single') {
+          angular.element(document.body).bind('click', hideOthers);
+      }
+
       var directiveName = snake_case( type );
 
       var startSym = $interpolate.startSymbol();
@@ -101,7 +182,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
           'content="'+startSym+'tt_content'+endSym+'" '+
           'placement="'+startSym+'tt_placement'+endSym+'" '+
           'animation="tt_animation()" '+
-          'is-open="tt_isOpen"'+
+          'is-open="tt_isOpen" '+
+          'style="z-index:9999"' + //Changed z-index so that popover is visible over modal when appendToBody is true
           '>'+
         '</'+ directiveName +'-popup>';
 
@@ -117,6 +199,8 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
           var triggers = getTriggers( undefined );
           var hasRegisteredTriggers = false;
 
+          scope.tooltip = tooltip;
+
           // By default, the tooltip is not open.
           // TODO add ability to start tooltip opened
           scope.tt_isOpen = false;
@@ -143,6 +227,10 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
               hide();
             });
           }
+
+          //Need to expose above function so that we can globally hide tooltips
+          scope.hideTooltipBind = hideTooltipBind;
+          scope.hide = hide;
 
           // Show the tooltip popup element.
           function show() {
@@ -155,6 +243,12 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
             if ( ! scope.tt_content ) {
               return;
             }
+
+            var popoverMode = angular.isDefined(options.popoverMode) ? options.popoverMode : 'multi';
+            //If this is a popover and mode in options is set to single, then hide other popovers
+            if (type == 'popover' && popoverMode == 'single') {
+                 hideOthers(element[0]);
+            }
 
             // If there is a pending remove transition, we must cancel it, lest the
             // tooltip be mysteriously removed.