Two instances of same popup div at cursor location

Question

On a webpage, I have an image. When I mouseover it, a hidden div pops up at cursor location with information on that image. Clicking on that image, creates another one in another div. The new image also share the same div pop up when mouseover.

For the original image I use jquery.

$("#" + abys).on("mouseover", function(e){
    $("#" + abys + "_tooltip").css({
        left: e.pageX,
        top: e.pageY
    }).show();
});

$("#" + abys).on("mouseout", function(e){
    $("#" + abys + "_tooltip").hide();
});

For the new image when clicked, I use pure javascript.

var itemDiv = document.getElementById("items_div");

var newImg = document.createElement("img");
    newImg.src = "/items_img/" + abys + ".png";
    newImg.id = abys + "_slot";
    itemDiv.appendChild(newImg);
    appendNum++;
    console.log(appendNum);

    newImg.onclick = function(){
        newImg.parentNode.removeChild(newImg);
        appendNum--;
        console.log(appendNum);
    }

    newImg.onmouseover = function(e){
        abysTooltip.style.display = "block";
        abysTooltip.style.top = e.pageX;
        abysTooltip.style.left = e.pageY;
    }

CSS for the popup div.

.item_tooltip_div {
    border:1px solid;
    padding:20px;
    width:400px;
    display:none;
    position:absolute;
    z-index:10;
    background-color:rgb(0,0,0);
    pointer-events:none;
}

The issue I am running into is that when I mouseover the new image, the tooltip shows up at the original image location, and not my mouse cursor position.

Maybe this could help? http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y — Jonas Grumann, Jan 09 '17 at 10:10
Well, the HTML is kinda long. In short, the new image is appended to a div not with the one containing the original image and the popup div. I tried using client, page, and screen, none of them did anything different. — Roger, Jan 09 '17 at 10:45

score 0 · Answer 1 · answered Jan 09 '17 at 11:44

Solved it by using jquery for both instances.

For some reason, jquery .css() was blocking javascript's .style. When hovering over the original image, the tooltip's top and left position is already set. When hovering over the new image, the top and left position did not change.

Two instances of same popup div at cursor location

1 Answers1