feat(tooltip): Added mouse placement option

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.

Author: lanterndev

src/popover/docs/demo.html

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

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.

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

src/tooltip/docs/demo.html

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

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.

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