Skip to content

Commit

Permalink
Merge pull request #206 from leonard-thieu/corner-positions
Browse files Browse the repository at this point in the history 
Add support for corner positions.
  • Loading branch information
@45kb
45kb authored May 21, 2017
2 parents 5e7cc33 + 6120efd commit 9fc8850
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 106 deletions.
2 changes: 1 addition & 1 deletion Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
68 changes: 68 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@

color: violet;
}

.fa-rotate-45 {
transform: rotate(45deg);
}
</style>
<title>Angularjs Tooltips</title>
</head>
Expand Down Expand Up @@ -94,6 +98,34 @@
tooltip-template="I'm another tooltip!"></i>
</div>

<div>
<i class="fa fa-arrow-left fa-rotate-45"
tooltips
tooltip-side="top left"
tooltip-template="I'm another tooltip!"></i>
</div>

<div>
<i class="fa fa-arrow-up fa-rotate-45"
tooltips
tooltip-side="top right"
tooltip-template="I'm another tooltip!"></i>
</div>

<div>
<i class="fa fa-arrow-down fa-rotate-45"
tooltips
tooltip-side="bottom left"
tooltip-template="I'm another tooltip!"></i>
</div>

<div>
<i class="fa fa-arrow-right fa-rotate-45"
tooltips
tooltip-side="bottom right"
tooltip-template="I'm another tooltip!"></i>
</div>

<div>
<span tooltips
tooltip-template="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.">
Expand Down Expand Up @@ -191,6 +223,42 @@
</span>
</div>

<div>
<span tooltips
tooltip-side="top left"
tooltip-smart="true"
tooltip-template="I'm a tooltip!">
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.
</span>
</div>

<div>
<span tooltips
tooltip-side="top right"
tooltip-smart="true"
tooltip-template="I'm a tooltip!">
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.
</span>
</div>

<div>
<span tooltips
tooltip-side="bottom left"
tooltip-smart="true"
tooltip-template="I'm a tooltip!">
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.
</span>
</div>

<div>
<span tooltips
tooltip-side="bottom right"
tooltip-smart="true"
tooltip-template="I'm a tooltip!">
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.
</span>
</div>

<div>
<span tooltips
tooltip-template="{{ demoCtrl.tooltipText }}">
Expand Down
139 changes: 39 additions & 100 deletions lib/angular-tooltips.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -642,9 +581,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 9fc8850

Please sign in to comment.