My aim is to display a popup when hovering over a grid. The question I have is, how can I position the popup at the center from the top and left for each grid. Could someone please help me modify the code below to calculate the correct offset (left & top)? In the plunker code provided below, the result is not as expected. Thank you for any assistance.
Here is the code snippet:
$(document).ready(function(){
$("ul.listing li").each(function(i){
var offset = $(this).offset();
console.log("index->" +i + "<-index " +"left - "+ offset.left+ "<br/> top - "+offset.top);
$(this).hover(function() {
$(".popupContainer").hide();
$(".popupContainer").fadeIn(200).html($(this).html()).css({'left': offset.left/3, 'top': offset.top});
$(".popupContainer").hover(function(){
$(".popupContainer").show();
}, function(){
$(".popupContainer").hide();
});
}, function() {
$(".popupContainer").hide();
});
});
});