Set Position of popup inside iframe

Question

I have an iframe and inside the body of iframe i have a div containing the html code of popup (display: none and position: absolute.)

Whenever i hover on any element i want to show this popup just below that element.

$(iframe).contents().find('.class').on('mouseenter', function(event) {
    // Below are the fields that i am getting
    var elementPos = hoveredElement.position();
    console.log('elementPos: '+JSON.stringify(elementPos))
    console.log('event.screenX: '+event.screenX)
    console.log('event.screenY: '+event.screenY)
    console.log('event.clientX: '+event.clientX)
    console.log('event.clientY: '+event.clientY)
}

I wanted to get the good value of top and left property so that i get the popup just below the hovered element.

Any help?

Below is the screenshot for reference. Green square is my iframe. Blue is the hovered element and popup with wrong position. ( I tried to set using the top & left property given by element.position() and event.clientX and event.clientY)