Skip to content

Commit

Permalink
now you can position tooltip also on top-left, top-right,bottom-left,…
Browse files Browse the repository at this point in the history 
…bottom-right thanks to @leonard-thieu
  • Loading branch information
@45kb
45kb committed May 21, 2017
1 parent 9fc8850 commit 2e57ad7
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 122 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-tooltips",
"version": "1.1.12",
"version": "1.2.0",
"description": "Angular.js tooltips module.",
"authors": [
"Filippo Oretti <filippo.oretti@gmail.com",
Expand Down
84 changes: 74 additions & 10 deletions dist/angular-tooltips.css
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/*
* angular-tooltips
* 1.1.12
* 1.2.0
*
* Angular.js tooltips module.
* http://720kb.github.io/angular-tooltips
*
* MIT license
* Sat May 20 2017
* Sun May 21 2017
*/
@-webkit-keyframes animate-tooltip {
0% {
Expand Down Expand Up @@ -100,12 +100,12 @@ tooltip {
font-size: 1.1em; }
tooltip tip-tip._small {
font-size: 0.8em; }
tooltip._top tip {
tooltip._top:not(._left):not(._right) tip {
left: 50%;
top: -9px;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%); }
tooltip._top tip tip-arrow {
tooltip._top:not(._left):not(._right) tip tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
Expand All @@ -116,12 +116,12 @@ tooltip {
position: absolute;
top: 100%;
width: 0; }
tooltip._bottom tip {
tooltip._bottom:not(._left):not(._right) tip {
right: 50%;
top: 100%;
-webkit-transform: translateX(50%) translateY(9px);
transform: translateX(50%) translateY(9px); }
tooltip._bottom tip tip-arrow {
tooltip._bottom:not(._left):not(._right) tip tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
Expand All @@ -132,12 +132,12 @@ tooltip {
margin-left: -6px;
position: absolute;
width: 0; }
tooltip._right tip {
tooltip._right:not(._top):not(._bottom) tip {
left: 100%;
top: 50%;
-webkit-transform: translateX(9px) translateY(-50%);
transform: translateX(9px) translateY(-50%); }
tooltip._right tip tip-arrow {
tooltip._right:not(._top):not(._bottom) tip tip-arrow {
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
Expand All @@ -148,12 +148,12 @@ tooltip {
right: 100%;
top: 50%;
width: 0; }
tooltip._left tip {
tooltip._left:not(._top):not(._bottom) tip {
left: -9px;
top: 50%;
-webkit-transform: translateX(-100%) translateY(-50%);
transform: translateX(-100%) translateY(-50%); }
tooltip._left tip tip-arrow {
tooltip._left:not(._top):not(._bottom) tip tip-arrow {
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
Expand All @@ -164,6 +164,70 @@ tooltip {
position: absolute;
top: 50%;
width: 0; }
tooltip._top._left tip {
left: -9px;
top: -9px;
-webkit-transform: translateX(-100%) translateY(-100%);
transform: translateX(-100%) translateY(-100%); }
tooltip._top._left tip tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 90%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0; }
tooltip._top._right tip {
left: 100%;
top: -9px;
-webkit-transform: translateX(9px) translateY(-100%);
transform: translateX(9px) translateY(-100%); }
tooltip._top._right tip tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 10%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0; }
tooltip._bottom._left tip {
left: -9px;
top: 100%;
-webkit-transform: translateX(-100%) translateY(9px);
transform: translateX(-100%) translateY(9px); }
tooltip._bottom._left tip tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 90%;
margin-left: -6px;
position: absolute;
width: 0; }
tooltip._bottom._right tip {
left: 100%;
top: 100%;
-webkit-transform: translateX(9px) translateY(9px);
transform: translateX(9px) translateY(9px); }
tooltip._bottom._right tip tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 10%;
margin-left: -6px;
position: absolute;
width: 0; }

tip-tip .close-button {
cursor: pointer;
Expand Down
143 changes: 41 additions & 102 deletions dist/angular-tooltips.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/*
* angular-tooltips
* 1.1.12
* 1.2.0
*
* Angular.js tooltips module.
* http://720kb.github.io/angular-tooltips
*
* MIT license
* Sat May 20 2017
* Sun May 21 2017
*/
/*global angular,window*/
(function withAngular(angular, window) {
Expand Down Expand Up @@ -214,6 +214,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 = {
Expand Down Expand Up @@ -270,7 +295,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
Expand Down Expand Up @@ -317,105 +342,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');
Expand Down Expand Up @@ -652,9 +591,9 @@

if (oldTooltipSide) {

tooltipElement.removeAttr('_' + oldTooltipSide);
tooltipElement.removeClass(oldTooltipSide);
}
tooltipElement.addClass('_' + newValue);
tooltipElement.addClass(getSideClasses(newValue));
oldTooltipSide = newValue;
}
}
Expand Down
Loading

0 comments on commit 2e57ad7

Please sign in to comment.