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 @@

Positional

+

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 );