jsfiddle here: /

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: /

Edit: Getting closer, but it is a little buggy! /

Solution: /

jsfiddle here: https://jsfiddle/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/Flignats/jzrzo56u/4/

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

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

• javascript
• jquery
• css
• angularjs

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

2 Answers 2

If you don't mind a little jQuery, this looks like it would help you: http://jsfiddle/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
    })
})

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