jQuery: Show div to the right of cursor on hover of some elements

Question

I have around 500 - 1000 rows of entities called tests each of which has components. These components need to be shown when the user hovers over any test. Upon the mouseover, I show the components information in a div and hide it upon mouseout. I am able to do that just fine with hard coded top and left position. However, I need to be able to show that div to the right side of the cursor with a gap of 50 to 100 px.

How can I change my code to do that?

$(".test_row").mouseover(function (event) {
    fillTestComponents(test, testId);
});

$(".test_row").mouseout(function (event) {
    $("#testCompHolder").hide();
});

function fillTestComponents(test, testId) {
    $.ajax({
        type: 'GET',
        url: "@Url.Action("GetTestComponents", "Templates", new { area = "Orders" })",
        data: { testIdentifier: testId },
        async: false,
        success: function (data) {
            var componentCount = data.length;
            if (componentCount != 0) {
                componentsHtml = "<p><u>" + test + "</u></p><ul>";
                for (var i = 0; i < componentCount; i++) {
                    componentsHtml = componentsHtml + "<li>(" + data[i].TestIdentifier + ") " + data[i].Description + "</li>"
                }
                componentsHtml += "</ul>";
                $('#testCompHolder').html(componentsHtml);
                $("#testCompHolder").show();
            }
            else {
                componentsHtml = "<p>No components exist for this test.</p>";
                $("#testCompHolder").show();
            }
        },
        error: function () {
            alert('An error occurred while loading the results.');
        }
    });
}

HTML:

<div id="testCompHolder" style="display:none; padding: 4px; border: 2px black solid; background-color: #dddddd; position: fixed; top: 300px; left: 380px;">

score 1 · Answer 1 · answered Oct 10 '13 at 14:38

1

You have to first get the position of mouse pointer, then use that to position your div.

Something like this:

$('.test_row').mouseover(function(evt) {
    var x = evt.pageX + 50, y = evt.pageY + 50; 
    $('#testCompHolder').css({ 'left': x + 'px', 'top': y + 'px' }); 
    $("#testCompHolder").show();
});

Not tested it though.

answered Oct 10 '13 at 14:38

Abhitalks

27,721
5
58
81

The pageX/pageY were sending the div to below the screen, so I used screenX/screenY instead, which were perfect for my situation. I got this information from here: http://stackoverflow.com/q/9262741/1539782 – Animesh Oct 10 '13 at 15:11

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

The only thing I changed from Abhi's answer is to use screenX/screenY instead of pageX/pageY

and passed it off to the fillTestComponents to show the div when ajax call succeeds.

$('.test_row').mouseover(function(event) {
    var x = event.clientX + 80;
    var y = event.clientY + 2;
    fillTestComponents(test, testId, x, y);
});

edited May 23 '17 at 12:14

Community

1
1

answered Oct 11 '13 at 06:12

Animesh

4,926
14
68
110

jQuery: Show div to the right of cursor on hover of some elements

2 Answers2