diff --git a/Readme.md b/Readme.md
index 20e8101..a190b82 100644
--- a/Readme.md
+++ b/Readme.md
@@ -81,7 +81,7 @@ Call the directive wherever you want in your html page
Option | Type | Default | Description
------------- | ------------- | ------------- | -------------
-tooltip-side="" | String('left','right','top','bottom') | 'top' | Set your tooltip to show on `left` or `right` or `top` or `bottom` position
+tooltip-side="" | String('left','right','top','bottom','top left','top right','bottom left','bottom right') | 'top' | Set your tooltip to show on `left` or `right` or `top` or `bottom` or `top left` or `top right` or `bottom left` or `bottom right` position
tooltip-template="" | String() | '' | Set your tooltip template (HTML or just Text)
| | | **to know**: don't use it together with `tooltip-template-url` attribute, use only one of them
tooltip-template-url="" | String() | '' | Set your external tooltip template PATH
diff --git a/index.html b/index.html
index 46425c6..685dfd6 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,10 @@
color: violet;
}
+
+ .fa-rotate-45 {
+ transform: rotate(45deg);
+ }
Angularjs Tooltips
@@ -94,6 +98,34 @@
tooltip-template="I'm another tooltip!">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -191,6 +223,42 @@
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
+
+
+
diff --git a/lib/angular-tooltips.js b/lib/angular-tooltips.js
index 9c6fabc..37df0a7 100644
--- a/lib/angular-tooltips.js
+++ b/lib/angular-tooltips.js
@@ -204,6 +204,31 @@
throw new Error('You must provide a position');
}
+ , getSideClasses = function getSideClasses(sides) {
+
+ return sides.split(' ').map(function mapSideClasses(side) {
+
+ return '_' + side;
+ }).join(' ');
+ }
+ , directions = ['_top', '_top _left', '_left', '_bottom _left', '_bottom', '_bottom _right', '_right', '_top _right']
+ , smartPosition = function smartPosition(tipElement, tooltipElement, startSide) {
+
+ var directionsIndex = directions.indexOf(getSideClasses(startSide))
+ , directionsLength = directions.length
+ , directionsCount = 0;
+
+ for (; directionsCount < directionsLength && isOutOfPage(tipElement); directionsCount += 1) {
+
+ directionsIndex += 1;
+ if (directionsIndex >= directions.length) {
+
+ directionsIndex = 0;
+ }
+ tooltipElement.removeClass('_top _left _bottom _right');
+ tooltipElement.addClass(directions[directionsIndex]);
+ }
+ }
, tooltipConfigurationProvider = function tooltipConfigurationProvider() {
var tooltipConfiguration = {
@@ -260,7 +285,7 @@
throw new Error('You can not have a controller without a template or templateUrl defined');
}
- var oldTooltipSide = '_' + tooltipsConf.side
+ var oldTooltipSide = getSideClasses(tooltipsConf.side)
, oldTooltipShowTrigger = tooltipsConf.showTrigger
, oldTooltipHideTrigger = tooltipsConf.hideTrigger
, oldTooltipClass
@@ -307,105 +332,19 @@
if ($attrs.tooltipSmart) {
switch ($attrs.tooltipSide) {
- case 'top': {
-
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_top');
- tooltipElement.addClass('_left');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_left');
- tooltipElement.addClass('_bottom');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_bottom');
- tooltipElement.addClass('_right');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_right');
- tooltipElement.addClass('_top');
- }
- }
- }
- }
- break;
- }
-
- case 'left': {
-
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_left');
- tooltipElement.addClass('_bottom');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_bottom');
- tooltipElement.addClass('_right');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_right');
- tooltipElement.addClass('_top');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_top');
- tooltipElement.addClass('_left');
- }
- }
- }
- }
- break;
- }
-
- case 'bottom': {
-
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_bottom');
- tooltipElement.addClass('_left');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_left');
- tooltipElement.addClass('_top');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_top');
- tooltipElement.addClass('_right');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_right');
- tooltipElement.addClass('_bottom');
- }
- }
- }
- }
- break;
- }
-
- case 'right': {
-
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_right');
- tooltipElement.addClass('_top');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_top');
- tooltipElement.addClass('_left');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_left');
- tooltipElement.addClass('_bottom');
- if (isOutOfPage(tipElement)) {
-
- tooltipElement.removeClass('_bottom');
- tooltipElement.addClass('_right');
- }
- }
- }
- }
+ case 'top':
+ case 'left':
+ case 'bottom':
+ case 'right':
+ case 'top left':
+ case 'top right':
+ case 'bottom left':
+ case 'bottom right': {
+
+ smartPosition(tipElement, tooltipElement, $attrs.tooltipSide);
break;
}
+
default: {
throw new Error('Position not supported');
@@ -642,9 +581,9 @@
if (oldTooltipSide) {
- tooltipElement.removeAttr('_' + oldTooltipSide);
+ tooltipElement.removeClass(oldTooltipSide);
}
- tooltipElement.addClass('_' + newValue);
+ tooltipElement.addClass(getSideClasses(newValue));
oldTooltipSide = newValue;
}
}
diff --git a/lib/angular-tooltips.scss b/lib/angular-tooltips.scss
index 22aa82f..3543f5d 100644
--- a/lib/angular-tooltips.scss
+++ b/lib/angular-tooltips.scss
@@ -160,7 +160,7 @@ tooltip {
}
}
- &._top {
+ &._top:not(._left):not(._right) {
tip {
@@ -182,8 +182,8 @@ tooltip {
}
}
}
-
- &._bottom {
+
+ &._bottom:not(._left):not(._right) {
tip {
@@ -206,7 +206,7 @@ tooltip {
}
}
- &._right {
+ &._right:not(._top):not(._bottom) {
tip {
@@ -229,7 +229,7 @@ tooltip {
}
}
- &._left {
+ &._left:not(._top):not(._bottom) {
tip {
@@ -251,6 +251,98 @@ tooltip {
}
}
}
+
+ &._top._left {
+
+ tip {
+
+ left: -($margin-tooltip-arrow + $tolerance);
+ top: -($margin-tooltip-arrow + $tolerance);
+ @include transform(-100%, -100%);
+
+ tip-arrow {
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-top: 6px solid $tooltip-background-color;
+ content: '';
+ height: 0;
+ left: 90%;
+ margin-left: -$margin-tooltip-arrow;
+ position: absolute;
+ top: 100%;
+ width: 0;
+ }
+ }
+ }
+
+ &._top._right {
+
+ tip {
+
+ left: 100%;
+ top: -($margin-tooltip-arrow + $tolerance);
+ @include transform($margin-tooltip-arrow + $tolerance, -100%);
+
+ tip-arrow {
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-top: 6px solid $tooltip-background-color;
+ content: '';
+ height: 0;
+ left: 10%;
+ margin-left: -$margin-tooltip-arrow;
+ position: absolute;
+ top: 100%;
+ width: 0;
+ }
+ }
+ }
+
+ &._bottom._left {
+
+ tip {
+
+ left: -($margin-tooltip-arrow + $tolerance);
+ top: 100%;
+ @include transform(-100%, $margin-tooltip-arrow + $tolerance);
+
+ tip-arrow {
+ border-bottom: 6px solid $tooltip-background-color;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ bottom: 100%;
+ content: '';
+ height: 0;
+ left: 90%;
+ margin-left: -$margin-tooltip-arrow;
+ position: absolute;
+ width: 0;
+ }
+ }
+ }
+
+ &._bottom._right {
+
+ tip {
+
+ left: 100%;
+ top: 100%;
+ @include transform($margin-tooltip-arrow + $tolerance, $margin-tooltip-arrow + $tolerance);
+
+ tip-arrow {
+ border-bottom: 6px solid $tooltip-background-color;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ bottom: 100%;
+ content: '';
+ height: 0;
+ left: 10%;
+ margin-left: -$margin-tooltip-arrow;
+ position: absolute;
+ width: 0;
+ }
+ }
+ }
}
tip-tip {