Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(tooltip): Added mouse placement option
Browse files Browse the repository at this point in the history
Adds a mouse() method to the $position service API to return the current
mouse position. The $tooltip API has been changed to allow using this
value to set the position of the tooltip element. The top left corner of
the element will be at the cursor position.
  • Loading branch information
lanterndev authored and Josh David Miller committed Jun 23, 2013
1 parent 56fd692 commit ace7bc6
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 11 deletions.
1 change: 1 addition & 0 deletions src/popover/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ <h4>Positional</h4>
<button popover-placement="left" popover="On the Left!" class="btn">Left</button>
<button popover-placement="right" popover="On the Right!" class="btn">Right</button>
<button popover-placement="bottom" popover="On the Bottom!" class="btn">Bottom</button>
<button popover-placement="mouse" popover="relative to mouse" class="btn">Mouse</button>
</div>
<div>
<h4>Triggers</h4>
Expand Down
2 changes: 1 addition & 1 deletion src/popover/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ will display:

- `popover-title`: A string to display as a fancy title.
- `popover-placement`: Where to place it? Defaults to "top", but also accepts
"bottom", "left", or "right".
"bottom", "left", "right", or "mouse".
- `popover-animation`: Should it fade in and out? Defaults to "true".
- `popover-popup-delay`: For how long should the user have to have the mouse
over the element before the popover shows (in milliseconds)? Defaults to 0.
Expand Down
14 changes: 14 additions & 0 deletions src/position/position.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@ angular.module('ui.bootstrap.position', [])
*/
.factory('$position', ['$document', '$window', function ($document, $window) {

var mouseX, mouseY;

$document.bind('mousemove', function mouseMoved(event) {
mouseX = event.pageX;
mouseY = event.pageY;
});

function getStyle(el, cssprop) {
if (el.currentStyle) { //IE
return el.currentStyle[cssprop];
Expand Down Expand Up @@ -74,6 +81,13 @@ angular.module('ui.bootstrap.position', [])
top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop),
left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft)
};
},

/**
* Provides the coordinates of the mouse
*/
mouse: function () {
return {x: mouseX, y: mouseY};
}
};
}]);
2 changes: 2 additions & 0 deletions src/tooltip/docs/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
<a><span tooltip-placement="bottom" tooltip="On the Bottom!">bottom</span></a>
pharetra convallis posuere morbi leo urna,
<a><span tooltip-placement="mouse" tooltip="relative to mouse">mouse</span></a>
blah blah blah,
<a><span tooltip-animation="false" tooltip="I don't fade. :-(">fading</span></a>
at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
<a><span tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</span></a> turpis massa tincidunt dui ut.
Expand Down
2 changes: 1 addition & 1 deletion src/tooltip/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The tooltip directives provide several optional attributes to control how they
will display:

- `tooltip-placement`: Where to place it? Defaults to "top", but also accepts
"bottom", "left", or "right".
"bottom", "left", "right", or "mouse".
- `tooltip-animation`: Should it fade in and out? Defaults to "true".
- `tooltip-popup-delay`: For how long should the user have to have the mouse
over the element before the tooltip shows (in milliseconds)? Defaults to 0.
Expand Down
28 changes: 19 additions & 9 deletions src/tooltip/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -180,32 +180,42 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
// Calculate the tooltip's top and left coordinates to center it with
// this directive.
switch ( scope.tt_placement ) {
case 'mouse':
var mousePos = $position.mouse();
ttPosition = {
top: mousePos.y,
left: mousePos.x
};
break;
case 'right':
ttPosition = {
top: (position.top + position.height / 2 - ttHeight / 2) + 'px',
left: (position.left + position.width) + 'px'
top: position.top + position.height / 2 - ttHeight / 2,
left: position.left + position.width
};
break;
case 'bottom':
ttPosition = {
top: (position.top + position.height) + 'px',
left: (position.left + position.width / 2 - ttWidth / 2) + 'px'
top: position.top + position.height,
left: position.left + position.width / 2 - ttWidth / 2
};
break;
case 'left':
ttPosition = {
top: (position.top + position.height / 2 - ttHeight / 2) + 'px',
left: (position.left - ttWidth) + 'px'
top: position.top + position.height / 2 - ttHeight / 2,
left: position.left - ttWidth
};
break;
default:
ttPosition = {
top: (position.top - ttHeight) + 'px',
left: (position.left + position.width / 2 - ttWidth / 2) + 'px'
top: position.top - ttHeight,
left: position.left + position.width / 2 - ttWidth / 2
};
break;
}


ttPosition.top += 'px';
ttPosition.left += 'px';

// Now set the calculated positioning.
tooltip.css( ttPosition );

Expand Down

0 comments on commit ace7bc6

Please sign in to comment.