Установить положение всплывающего окна внутри iframe

Question

У меня есть iframe, а внутри тела iframe у меня есть div, содержащий html код всплывающего окна (display: none и position: absolute.)

Всякий раз, когда я наводю курсор на любой элемент, который хочу покажите это всплывающее окно чуть ниже этого элемента.

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

Я хотел получить правильное значение свойства top и left, чтобы получить всплывающее окно чуть ниже элемента hovered.

Любая помощь?

Ниже приведен скриншот для справки. Зеленый квадрат - это мой фрейм. Синий - это элемент наведения и всплывающее окно с неправильной позицией. (Я попытался установить, используя свойство top & left, данное element.position () и event.clientX и event.clientY)