AngularJS: Have element follow the cursor

Question

jsfiddle here: https://jsfiddle.net/Flignats/jzrzo56u/3/

I have an element on my page that is initially hidden (popover). When another element on the page is hovered over, I want the popover to display next to the cursor.

In my fiddle, I have 3 paragraphs and the popover. When the user's cursor enters the paragraph, the popover is displayed. When the user's cursor leaves the element, the popover is no longer displayed.

I'm having trouble retrieving the cursor coordinates and position the popover near the cursor.

Any help is appreciated :)

Angular Code:

var app = angular.module('myApp', []);

app.controller('Ctrl',['$scope',function($scope) {
$scope.name = 'Ray';
$scope.popover = false;

//Method to show popover
$scope.showPopover = function() {
return $scope.popover = !$scope.popover;
};


}]);

HTML code:

<div ng-app="myApp" ng-controller="Ctrl">
  <div id="container">
    <p ng-mouseenter="showPopover()" ng-mouseleave="showPopover()">Square 1</p>
    <p ng-mouseenter="showPopover()" ng-mouseleave="showPopover()">Square 2</p>
    <p ng-mouseenter="showPopover()" ng-mouseleave="showPopover()">Square 3</p>
  </div>
  <div class="pop-availability" ng-show="popover">
    <div class="pop-title">
        <p>Title Content Goes Here</p>
    </div>
    <div class="pop-content">
        <table class="pop-table">
            <thead>
                <tr>
                    <th></th>
                    <th ng-repeat='name in data.record'>{{name.name}}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1</td>
                    <td ng-repeat='available in data.record'>{{available.number}}</td>
                </tr>
                <tr>
                    <td>Row 2</td>
                    <td ng-repeat='unavailable in data.record'>{{unavailable.number}}</td>
                </tr>
                <tr>
                    <td>Row 3</td>
                    <td ng-repeat='unassigned in data.record'>{{unassigned.number}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

Edit: Updated jsfiddle that captures mouse coordinates. Still having trouble getting the popover to move to the cursor: https://jsfiddle.net/Flignats/jzrzo56u/4/

Edit: Getting closer, but it is a little buggy! https://jsfiddle.net/Flignats/jzrzo56u/5/

Solution: https://jsfiddle.net/Flignats/jzrzo56u/6/

Answer 1

If you don't mind a little jQuery, this looks like it would help you: http://jsfiddle.net/strangeline/jxqpv/light/

code:

function getMousePos(evt) {
    var doc = document.documentElement || document.body;
    var pos = {
        x: evt ? evt.pageX : window.event.clientX + doc.scrollLeft - doc.clientLeft,
        y: evt ? evt.pageY : window.event.clientY + doc.scrollTop - doc.clientTop
    };
    return pos;

}
document.onmousemove = moveMouse;

function moveMouse(evt) {
    var pos = getMousePos(evt),
        cood = document.getElementById("showCood");
    cood.style.display = 'block';
    cood.style.left = pos.x + 50 + "px";
    cood.style.top = pos.y + 50 + "px";
    document.getElementById('posX').innerHTML = "X: " + pos.x;
    document.getElementById('posY').innerHTML = "Y: " + pos.y;

}

$(document).mousemove(function(e) {
    $("#jQueryPos").text(e.pageX + "," + e.pageY).show().css({
        'left': e.pageX - 50,
        "top": e.pageY - 50
    })
})