From ace7bc60e5981934ae370d40096ddf0e43b21538 Mon Sep 17 00:00:00 2001
From: _pants <_pants@getlantern.org>
Date: Sun, 23 Jun 2013 10:18:19 -0700
Subject: [PATCH] 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.
---
 src/popover/docs/demo.html |  1 +
 src/popover/docs/readme.md |  2 +-
 src/position/position.js   | 14 ++++++++++++++
 src/tooltip/docs/demo.html |  2 ++
 src/tooltip/docs/readme.md |  2 +-
 src/tooltip/tooltip.js     | 28 +++++++++++++++++++---------
 6 files changed, 38 insertions(+), 11 deletions(-)

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