I am experimenting with this CSS popover found http://codepen.io/derekpcollins/pen/JCLhG/. Here is the code to the popover.
.popover {
background-color: rgba(0,0,0,0.85);
border-radius: 5px;
bottom: 42px;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
color: #fff;
display: none;
font-size: 12px;
font-family: 'Helvetica',sans-serif;
left: -95px;
padding: 7px 10px;
position: absolute;
width: 200px;
z-index: 4;
}
The popover is position: absolute;
with a left: -95;
If you want to make it larger and in the correct position, you need to adjust the left value.
CSS
.popover {
width: 400px;
left: -195px;
}
Result
EDIT: I wrote this answer to explain why your popup was not being centered, which was due to your left margin being set to -95px. The solution I wrote is not dynamic. Paule_D or ScientiaEtVeritas's answer would be more appropriate if you were looking for a dynamic solution.