diff --git a/src/popover/docs/demo.html b/src/popover/docs/demo.html
index 2a9bdfb1b4..ffde3bc007 100644
--- a/src/popover/docs/demo.html
+++ b/src/popover/docs/demo.html
@@ -13,6 +13,7 @@
Triggers
diff --git a/src/popover/docs/readme.md b/src/popover/docs/readme.md
index e94651ccb3..083610ac27 100644
--- a/src/popover/docs/readme.md
+++ b/src/popover/docs/readme.md
@@ -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.
diff --git a/src/position/position.js b/src/position/position.js
index d5200a4076..bfda14711b 100644
--- a/src/position/position.js
+++ b/src/position/position.js
@@ -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];
@@ -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};
}
};
}]);
diff --git a/src/tooltip/docs/demo.html b/src/tooltip/docs/demo.html
index 40c8a3c110..8518881e85 100644
--- a/src/tooltip/docs/demo.html
+++ b/src/tooltip/docs/demo.html
@@ -12,6 +12,8 @@
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
bottom
pharetra convallis posuere morbi leo urna,
+
mouse
+ blah blah blah,
fading
at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
delayed turpis massa tincidunt dui ut.
diff --git a/src/tooltip/docs/readme.md b/src/tooltip/docs/readme.md
index 5ecb79563d..692216bab9 100644
--- a/src/tooltip/docs/readme.md
+++ b/src/tooltip/docs/readme.md
@@ -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.
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index beda193a73..b236d6c6a0 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -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 );