angularjs-tooltips - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

bower.json

 {
   "name": "angular-tooltips",
   "description": "Tooltip Directive For AngularJS",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "homepage": "https://github.com/intellipharm/angular-tooltips",
@@ -6,0 +6,0 @@ "repository": {

dist/angular-tooltips.js

@@ -8,3 +8,4 @@ (function() {
             scope: {
-                title: '@'
+                title: '@',
+                fixedPosition: '=',
             },
@@ -18,4 +19,3 @@ link: function ($scope, element, attrs) {
                         // create the tooltip
-                        $scope.tooltipElement = angular.element('<div>')
-                        .addClass('angular-tooltip angular-tooltip-' + direction);
+                        $scope.tooltipElement = angular.element('<div>').addClass('angular-tooltip');
 
@@ -25,2 +25,3 @@ // append to the body
 
+                        // update the contents and position
                         $scope.updateTooltip(attrs.title || attrs.tooltip);
@@ -34,8 +35,11 @@
                 $scope.updateTooltip = function(title) {
+                    // insert html into tooltip
                     $scope.tooltipElement.html(title);
 
+                    // compile html contents into angularjs
                     $compile($scope.tooltipElement.contents())($scope);
 
-                    var css = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
-                    $scope.tooltipElement.css(css);
+                    // calculate the position of the tooltip
+                    var pos = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
+                    $scope.tooltipElement.addClass('angular-tooltip-' + pos.direction).css(pos);
 
@@ -49,2 +53,3 @@ // stop the standard tooltip from being shown
 
+                // if the title changes the update the tooltip
                 $scope.$watch('title', function(newTitle) {
@@ -71,2 +76,3 @@ if ($scope.tooltipElement) {
 
+                // calculates the position of the tooltip
                 $scope.calculatePosition = function(tooltip, direction) {
@@ -78,75 +84,65 @@ var tooltipBounding = tooltip[0].getBoundingClientRect();
                     var arrow_padding = 12;
+                    var pos = {};
+                    var newDirection = null;
 
-                    switch (direction) {
-                        case 'top':
-                        case 'top-center':
-                        case 'top-middle':
-                            return {
-                                left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'top-right':
-                            return {
-                                left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'right-top':
-                            return {
-                                left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
-                            };
-                        case 'right':
-                        case 'right-center':
-                        case 'right-middle':
-                            return {
-                                left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
-                            };
-                        case 'right-bottom':
-                            return {
-                                left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
-                            };
-                        case 'bottom-right':
-                            return {
-                                left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'bottom':
-                        case 'bottom-center':
-                        case 'bottom-middle':
-                            return {
-                                left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'bottom-left':
-                            return {
-                                left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'left-bottom':
-                            return {
-                                left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
-                            };
-                        case 'left':
-                        case 'left-center':
-                        case 'left-middle':
-                            return {
-                                left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
-                            };
-                        case 'left-top':
-                            return {
-                                left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
-                            };
-                        case 'top-left':
-                            return {
-                                left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
-                            };
+                    // calculate the left position
+                    if ($scope.stringStartsWith(direction, 'left')) {
+                        pos.left = elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft;
+                    } else if ($scope.stringStartsWith(direction, 'right')) {
+                        pos.left = elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft;
+                    } else if ($scope.stringContains(direction, 'left')) {
+                        pos.left = elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft;
+                    } else if ($scope.stringContains(direction, 'right')) {
+                        pos.left = elBounding.left + elBounding.width - arrow_padding + scrollLeft;
+                    } else {
+                        pos.left = elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft;
                     }
+
+                    // calculate the top position
+                    if ($scope.stringStartsWith(direction, 'top')) {
+                        pos.top = elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop;
+                    } else if ($scope.stringStartsWith(direction, 'bottom')) {
+                        pos.top = elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop;
+                    } else if ($scope.stringContains(direction, 'top')) {
+                        pos.top = elBounding.top - tooltipBounding.height + arrow_padding + scrollTop;
+                    } else if ($scope.stringContains(direction, 'bottom')) {
+                        pos.top = elBounding.top + elBounding.height - arrow_padding + scrollTop;
+                    } else {
+                        pos.top = elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop;
+                    }
+
+                    // check if the tooltip is outside the bounds of the window
+                    if ($scope.fixedPosition) {
+                        if (pos.left < scrollLeft) {
+                            newDirection = direction.replace('left', 'right');
+                        } else if ((pos.left + tooltipBounding.width) > (window.innerWidth + scrollLeft)) {
+                            newDirection = direction.replace('right', 'left');
+                        }
+
+                        if (pos.top < scrollTop) {
+                            newDirection = direction.replace('top', 'bottom');
+                        } else if ((pos.top + tooltipBounding.height) > (window.innerHeight + scrollTop)) {
+                            newDirection = direction.replace('bottom', 'top');
+                        }
+
+                        if (newDirection) {
+                            return $scope.calculatePosition(tooltip, newDirection);
+                        }
+                    }
+
+                    pos.left += 'px';
+                    pos.top += 'px';
+                    pos.direction = direction;
+
+                    return pos;
                 };
 
+                $scope.stringStartsWith = function(searchString, findString) {
+                    return searchString.substr(0, findString.length) === findString;
+                };
+
+                $scope.stringContains = function(searchString, findString) {
+                    return searchString.indexOf(findString) !== -1;
+                };
+
                 if (attrs.title || attrs.tooltip) {
@@ -153,0 +149,0 @@ // attach events to show tooltip

dist/angular-tooltips.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";var t=function(t,e){return{restrict:"A",scope:{title:"@"},link:function(o,i,l){o.createTooltip=function(t){if(l.title||l.tooltip){var e=o.getDirection();o.tooltipElement=angular.element("<div>").addClass("angular-tooltip angular-tooltip-"+e),angular.element(document).find("body").append(o.tooltipElement),o.updateTooltip(l.title||l.tooltip),o.tooltipElement.addClass("angular-tooltip-fade-in")}},o.updateTooltip=function(l){o.tooltipElement.html(l),e(o.tooltipElement.contents())(o);var p=o.calculatePosition(o.tooltipElement,o.getDirection());o.tooltipElement.css(p),t(function(){i.removeAttr("ng-attr-title"),i.removeAttr("title")})},o.$watch("title",function(t){o.tooltipElement&&o.updateTooltip(t)}),o.removeTooltip=function(){var t=angular.element(document.querySelectorAll(".angular-tooltip"));t.remove()},o.getDirection=function(){return i.attr("tooltip-direction")||i.attr("title-direction")||"top"},o.calculatePosition=function(t,e){var o=t[0].getBoundingClientRect(),l=i[0].getBoundingClientRect(),p=window.scrollX||document.documentElement.scrollLeft,n=window.scrollY||document.documentElement.scrollTop,r=12;switch(e){case"top":case"top-center":case"top-middle":return{left:l.left+l.width/2-o.width/2+p+"px",top:l.top-o.height-r/2+n+"px"};case"top-right":return{left:l.left+l.width-r+p+"px",top:l.top-o.height-r/2+n+"px"};case"right-top":return{left:l.left+l.width+r/2+p+"px",top:l.top-o.height+r+n+"px"};case"right":case"right-center":case"right-middle":return{left:l.left+l.width+r/2+p+"px",top:l.top+l.height/2-o.height/2+n+"px"};case"right-bottom":return{left:l.left+l.width+r/2+p+"px",top:l.top+l.height-r+n+"px"};case"bottom-right":return{left:l.left+l.width-r+p+"px",top:l.top+l.height+r/2+n+"px"};case"bottom":case"bottom-center":case"bottom-middle":return{left:l.left+l.width/2-o.width/2+p+"px",top:l.top+l.height+r/2+n+"px"};case"bottom-left":return{left:l.left-o.width+r+p+"px",top:l.top+l.height+r/2+n+"px"};case"left-bottom":return{left:l.left-o.width-r/2+p+"px",top:l.top+l.height-r+n+"px"};case"left":case"left-center":case"left-middle":return{left:l.left-o.width-r/2+p+"px",top:l.top+l.height/2-o.height/2+n+"px"};case"left-top":return{left:l.left-o.width-r/2+p+"px",top:l.top-o.height+r+n+"px"};case"top-left":return{left:l.left-o.width+r+p+"px",top:l.top-o.height-r/2+n+"px"}}},l.title||l.tooltip?(i.on("mouseover",o.createTooltip),i.on("mouseout",o.removeTooltip)):(i.off("mouseover",o.createTooltip),i.off("mouseout",o.removeTooltip)),i.on("destroy",o.removeTooltip),o.$on("$destroy",o.removeTooltip)}}};t.$inject=["$timeout","$compile"],angular.module("tooltips",[]).directive("title",t).directive("tooltip",t)}();
+!function(){"use strict";var t=function(t,o){return{restrict:"A",scope:{title:"@",fixedPosition:"="},link:function(e,i,n){e.createTooltip=function(t){if(n.title||n.tooltip){e.getDirection();e.tooltipElement=angular.element("<div>").addClass("angular-tooltip"),angular.element(document).find("body").append(e.tooltipElement),e.updateTooltip(n.title||n.tooltip),e.tooltipElement.addClass("angular-tooltip-fade-in")}},e.updateTooltip=function(n){e.tooltipElement.html(n),o(e.tooltipElement.contents())(e);var l=e.calculatePosition(e.tooltipElement,e.getDirection());e.tooltipElement.addClass("angular-tooltip-"+l.direction).css(l),t(function(){i.removeAttr("ng-attr-title"),i.removeAttr("title")})},e.$watch("title",function(t){e.tooltipElement&&e.updateTooltip(t)}),e.removeTooltip=function(){angular.element(document.querySelectorAll(".angular-tooltip")).remove()},e.getDirection=function(){return i.attr("tooltip-direction")||i.attr("title-direction")||"top"},e.calculatePosition=function(t,o){var n=t[0].getBoundingClientRect(),l=i[0].getBoundingClientRect(),r=window.scrollX||document.documentElement.scrollLeft,p=window.scrollY||document.documentElement.scrollTop,a={},c=null;return e.stringStartsWith(o,"left")?a.left=l.left-n.width-6+r:e.stringStartsWith(o,"right")?a.left=l.left+l.width+6+r:e.stringContains(o,"left")?a.left=l.left-n.width+12+r:e.stringContains(o,"right")?a.left=l.left+l.width-12+r:a.left=l.left+l.width/2-n.width/2+r,e.stringStartsWith(o,"top")?a.top=l.top-n.height-6+p:e.stringStartsWith(o,"bottom")?a.top=l.top+l.height+6+p:e.stringContains(o,"top")?a.top=l.top-n.height+12+p:e.stringContains(o,"bottom")?a.top=l.top+l.height-12+p:a.top=l.top+l.height/2-n.height/2+p,e.fixedPosition&&(a.left<r?c=o.replace("left","right"):a.left+n.width>window.innerWidth+r&&(c=o.replace("right","left")),a.top<p?c=o.replace("top","bottom"):a.top+n.height>window.innerHeight+p&&(c=o.replace("bottom","top")),c)?e.calculatePosition(t,c):(a.left+="px",a.top+="px",a.direction=o,a)},e.stringStartsWith=function(t,o){return t.substr(0,o.length)===o},e.stringContains=function(t,o){return-1!==t.indexOf(o)},n.title||n.tooltip?(i.on("mouseover",e.createTooltip),i.on("mouseout",e.removeTooltip)):(i.off("mouseover",e.createTooltip),i.off("mouseout",e.removeTooltip)),i.on("destroy",e.removeTooltip),e.$on("$destroy",e.removeTooltip)}}};t.$inject=["$timeout","$compile"],angular.module("tooltips",[]).directive("title",t).directive("tooltip",t)}();

examples/app.js

@@ -0,0 +0,0 @@ angular.module('app', ['tooltips']).controller('AppCtrl', function($scope) {

gulp/options/autoprefixer.js

@@ -0,0 +0,0 @@ module.exports = {

gulp/options/uglify.js

 module.exports = {
 	mangle: true
 };

gulp/paths.js

@@ -0,0 +0,0 @@ var SRC = 'src/';

gulp/tasks/clean.js

@@ -0,0 +0,0 @@ var gulp = require('gulp');

gulp/tasks/code-style-js.js

@@ -0,0 +0,0 @@ var gulp    = require('gulp');

gulp/tasks/compile-scss.js

@@ -0,0 +0,0 @@ var gulp = require('gulp');

gulp/tasks/copy-js.js

@@ -0,0 +0,0 @@ var gulp = require('gulp');

gulp/tasks/lint-js.js

@@ -0,0 +0,0 @@ var gulp   = require('gulp');

gulp/tasks/minify-css.js

@@ -0,0 +0,0 @@ var gulp = require('gulp');

gulp/tasks/minify-js.js

@@ -0,0 +0,0 @@ var gulp = require('gulp');

gulp/utils/error-handler.js

@@ -0,0 +0,0 @@ var gutil = require('gulp-util');

gulpfile.js

@@ -0,0 +0,0 @@ require('require-dir')('gulp/tasks');

package.json

 {
   "name": "angularjs-tooltips",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
@@ -15,8 +15,8 @@ "main": "dist/angular-tooltips.js",
   "devDependencies": {
-    "del": "^2.2.0",
+    "del": "^3.0.0",
     "glob": "^7.0.0",
     "gulp": "^3.0.0",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-changed": "^1.3.0",
-    "gulp-cssmin": "^0.1.7",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-changed": "^3.0.0",
+    "gulp-cssmin": "^0.2.0",
     "gulp-jscs": "^4.0.0",
@@ -27,12 +27,12 @@ "gulp-jshint": "^2.0.0",
     "gulp-sass": "^3.0.0",
-    "gulp-scss-lint": "^0.4.0",
-    "gulp-uglify": "^2.0.0",
+    "gulp-scss-lint": "^0.5.0",
+    "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.6",
     "jshint": "^2.9.1",
     "jshint-stylish": "^2.1.0",
-    "node-notifier": "^4.2.3",
+    "node-notifier": "^5.0.0",
     "require-dir": "^0.3.0",
-    "run-sequence": "^1.1.2",
+    "run-sequence": "^2.0.0",
     "vinyl-paths": "^2.0.0"
   }
 }

README.md

@@ -41,3 +41,3 @@ # angular-tooltips
 
-You can also specify the direction of the tooltip using ```title-direction``` with the options: top, top-right, right-top, right, right-bottom, bottom-right, bottom, bottom-left, left-bottom, left, left-top, top-left
+The direction of the tooltip can be specified using ```title-direction``` with the options: top, top-right, right-top, right, right-bottom, bottom-right, bottom, bottom-left, left-bottom, left, left-top, top-left
 
@@ -48,2 +48,9 @@ ```html
 
+The direction of the tooltip will automatically swap if the tooltip will sit outside of the window bounds.
+To stop this happening and force the direction set the ```fixed-position``` option
+
+```html
+<i class="fa fa-star" title="This is a star!" title-direction="right" fixed-position="true"></i>
+```
+
 ## Demo
@@ -50,0 +57,0 @@

src/angular-tooltips.js

@@ -8,3 +8,4 @@ (function() {
             scope: {
-                title: '@'
+                title: '@',
+                fixedPosition: '=',
             },
@@ -18,4 +19,3 @@ link: function ($scope, element, attrs) {
                         // create the tooltip
-                        $scope.tooltipElement = angular.element('<div>')
-                        .addClass('angular-tooltip angular-tooltip-' + direction);
+                        $scope.tooltipElement = angular.element('<div>').addClass('angular-tooltip');
 
@@ -25,2 +25,3 @@ // append to the body
 
+                        // update the contents and position
                         $scope.updateTooltip(attrs.title || attrs.tooltip);
@@ -34,8 +35,11 @@
                 $scope.updateTooltip = function(title) {
+                    // insert html into tooltip
                     $scope.tooltipElement.html(title);
 
+                    // compile html contents into angularjs
                     $compile($scope.tooltipElement.contents())($scope);
 
-                    var css = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
-                    $scope.tooltipElement.css(css);
+                    // calculate the position of the tooltip
+                    var pos = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
+                    $scope.tooltipElement.addClass('angular-tooltip-' + pos.direction).css(pos);
 
@@ -49,2 +53,3 @@ // stop the standard tooltip from being shown
 
+                // if the title changes the update the tooltip
                 $scope.$watch('title', function(newTitle) {
@@ -71,2 +76,3 @@ if ($scope.tooltipElement) {
 
+                // calculates the position of the tooltip
                 $scope.calculatePosition = function(tooltip, direction) {
@@ -78,75 +84,65 @@ var tooltipBounding = tooltip[0].getBoundingClientRect();
                     var arrow_padding = 12;
+                    var pos = {};
+                    var newDirection = null;
 
-                    switch (direction) {
-                        case 'top':
-                        case 'top-center':
-                        case 'top-middle':
-                            return {
-                                left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'top-right':
-                            return {
-                                left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'right-top':
-                            return {
-                                left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
-                            };
-                        case 'right':
-                        case 'right-center':
-                        case 'right-middle':
-                            return {
-                                left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
-                            };
-                        case 'right-bottom':
-                            return {
-                                left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
-                            };
-                        case 'bottom-right':
-                            return {
-                                left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'bottom':
-                        case 'bottom-center':
-                        case 'bottom-middle':
-                            return {
-                                left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'bottom-left':
-                            return {
-                                left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
-                            };
-                        case 'left-bottom':
-                            return {
-                                left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
-                            };
-                        case 'left':
-                        case 'left-center':
-                        case 'left-middle':
-                            return {
-                                left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
-                            };
-                        case 'left-top':
-                            return {
-                                left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
-                            };
-                        case 'top-left':
-                            return {
-                                left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
-                                top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
-                            };
+                    // calculate the left position
+                    if ($scope.stringStartsWith(direction, 'left')) {
+                        pos.left = elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft;
+                    } else if ($scope.stringStartsWith(direction, 'right')) {
+                        pos.left = elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft;
+                    } else if ($scope.stringContains(direction, 'left')) {
+                        pos.left = elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft;
+                    } else if ($scope.stringContains(direction, 'right')) {
+                        pos.left = elBounding.left + elBounding.width - arrow_padding + scrollLeft;
+                    } else {
+                        pos.left = elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft;
                     }
+
+                    // calculate the top position
+                    if ($scope.stringStartsWith(direction, 'top')) {
+                        pos.top = elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop;
+                    } else if ($scope.stringStartsWith(direction, 'bottom')) {
+                        pos.top = elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop;
+                    } else if ($scope.stringContains(direction, 'top')) {
+                        pos.top = elBounding.top - tooltipBounding.height + arrow_padding + scrollTop;
+                    } else if ($scope.stringContains(direction, 'bottom')) {
+                        pos.top = elBounding.top + elBounding.height - arrow_padding + scrollTop;
+                    } else {
+                        pos.top = elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop;
+                    }
+
+                    // check if the tooltip is outside the bounds of the window
+                    if ($scope.fixedPosition) {
+                        if (pos.left < scrollLeft) {
+                            newDirection = direction.replace('left', 'right');
+                        } else if ((pos.left + tooltipBounding.width) > (window.innerWidth + scrollLeft)) {
+                            newDirection = direction.replace('right', 'left');
+                        }
+
+                        if (pos.top < scrollTop) {
+                            newDirection = direction.replace('top', 'bottom');
+                        } else if ((pos.top + tooltipBounding.height) > (window.innerHeight + scrollTop)) {
+                            newDirection = direction.replace('bottom', 'top');
+                        }
+
+                        if (newDirection) {
+                            return $scope.calculatePosition(tooltip, newDirection);
+                        }
+                    }
+
+                    pos.left += 'px';
+                    pos.top += 'px';
+                    pos.direction = direction;
+
+                    return pos;
                 };
 
+                $scope.stringStartsWith = function(searchString, findString) {
+                    return searchString.substr(0, findString.length) === findString;
+                };
+
+                $scope.stringContains = function(searchString, findString) {
+                    return searchString.indexOf(findString) !== -1;
+                };
+
                 if (attrs.title || attrs.tooltip) {
@@ -153,0 +149,0 @@ // attach events to show tooltip

No alert changes

Improved metrics

Total package byte prevSize

63375

0.26%

Number of lines in readme file

61

12.96%

Worsened metrics

Lines of code

602

-3.83%

No dependency changes