AngularJS: element follows 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 hangs, I want the popover to appear next to the cursor.

In my violin I have 3 paragraphs and a popover. When a custom cursor enters a paragraph, a popover is displayed. When the user cursor leaves the element, the popover is no longer displayed.

I'm having trouble finding the coordinates of the cursor and the location of the cover next to 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 fixes mouse coordinates. Still having problems moving the popover to the cursor: https://jsfiddle.net/Flignats/jzrzo56u/4/

Edit: get closer, but it's a little buggy! https://jsfiddle.net/Flignats/jzrzo56u/5/

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

Answer 1

Jsfiddle

HTML - added $ event parameter to showPopover function

 <p ng-mouseenter="showPopover($event)" ng-mouseleave="showPopover()">Square 1</p> <p ng-mouseenter="showPopover($event)" ng-mouseleave="showPopover()">Square 2</p> <p ng-mouseenter="showPopover($event)" ng-mouseleave="showPopover()">Square 3</p> 

and with ng-style you can change the position Source

 <div class="pop-availability" ng-show="popover" ng-style="{left:field.left, top:field.top}" > 

Javascript

 //Method to show popover $scope.showPopover = function(mouseEvent) { if (!mouseEvent) { mouseEvent = window.event; } $scope.field.left = mouseEvent.pageX + 'px'; $scope.field.top = mouseEvent.pageY+ 'px'; return $scope.popover = !$scope.popover; }; 

CSS changes - added position:absolute

 .pop-availability { border-radius: 8px; box-shadow: 0 0 10px 0 #969696; display: inline-block; min-width: 375px; position:absolute; } 

Answer 2

If you don't mind a little jQuery, this seems to 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 }) })