Bug #108 tooltip outsides

client/core/src/components/tooltip/tooltip.js

@@ -74,9 +74,29 @@ function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http,
 
             function _bindEvents() {
                 element.bind('mouseover', function(e) {
-                    tip.addClass(tipActiveClassName);
+                    _showTooltip(e);
+                });
 
-                    let pos = e.target.getBoundingClientRect();
+                element.on('mouseout', function() {
+                    _hideTooltip();
+                });
+
+                tip.on('mouseover', function(e) {
+                    _showTooltip(e);
+                });
+
+                tip.on('mouseout', function() {
+                    _hideTooltip();
+                });
+
+                element.on('$destroy', function() {
+                    tip.remove();
+                    scope.$destroy();
+                });
+            }
+
+            function _calculatePosition(e) {
+                let pos = element[0].getBoundingClientRect();
                 let tipPos = tip[0].getBoundingClientRect();
                 let offset = {top: 0, left: 0};
                 let tipWidth = tipPos.width || tipPos.right - tipPos.left;
@@ -98,27 +118,39 @@ function tooltip($document, $compile, $interpolate, $sce, $templateCache, $http,
                     offset.top = pos.top - tipHeight - tipOffset;
                     offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
                 }
+                // outsides
+                if (offset.left + tipPos.width > window.innerWidth) { // right outside
+                    let diffLeft = (offset.left + tipPos.width) - window.innerWidth;
+                    offset.left -= diffLeft + 10;
+
+                    let arrow = tip[0].querySelector('.tooltip-arrow');
+                    if (arrow) {
+                        angular.element(arrow).css('margin-left', diffLeft + 'px');
+                    }
+                } else if (offset.left < 10) { // left outside
+                    offset.left = 10;
+                    let arrow = tip[0].querySelector('.tooltip-arrow');
+                    if (arrow) {
+                        angular.element(arrow).css('margin-left', '10px');
+                    }
+                }
+                if (offset.top > window.innerHeight) { // down outside
+                    offset.top = pos.top - tipHeight - tipOffset;
+                } else if (offset.top < 10) { // top outside
+                    offset.top = pos.top + elHeight + tipOffset;
+                }
 
                 tip.css('top', offset.top + 'px');
                 tip.css('left', offset.left + 'px');
-                });
+            }
 
-                element.on('mouseout', function() {
+            function _showTooltip(e) {
-                    tip.removeClass(tipActiveClassName);
-                });
-
-                tip.on('mouseover', function() {
                 tip.addClass(tipActiveClassName);
-                });
+                _calculatePosition(e);
+            }
 
-                tip.on('mouseout', function() {
+            function _hideTooltip() {
                 tip.removeClass(tipActiveClassName);
-                });
-
-                element.on('$destroy', function() {
-                    tip.remove();
-                    scope.$destroy();
-                });
             }
         }
     };