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/

Have a look at angularjshub.com/examples/eventhandlers/mouseevents - there you'll find a way to get the cursor position. — axel.michel
– axel.michel, Commented Jan 28, 2016 at 22:29

Mark · Accepted Answer · 2016-01-28 22:33:05Z

3

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

answered Jan 28, 2016 at 22:33

Mark

415 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flignats Over a year ago

Thanks for looking around, I saw this response and it helped me get the mouse coordinates. However, I would like to use an angular solution and this didn't help me get exactly what I was asking for.

Community · Accepted Answer · 2017-05-23 12:01:48Z

2

JSFiddle

HTML - added the $event parameter to the 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;
}

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jan 28, 2016 at 22:51

Martin

2,43711 gold badges30 silver badges32 bronze badges

3 Comments

Flignats Over a year ago

Great suggestions, this led me to the final solution; which is still a little buggy, but answers my original question. Thanks!

Flignats Over a year ago

What is the purpose of the !mouseEvent conditional statement?

Martin Over a year ago

It is a check to see if the Mouseevent is not set it will go and get the value from the window.event

Collectives™ on Stack Overflow

AngularJS: Have element follow the cursor

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related