Winston Winston - 4 months ago 11
CSS Question

Keep Popover centered relative to a button

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;
}


and on hover, the popover looks like this

enter image description here

I want to make the popover wider, but when I change the width to, say, 600px, it becomes misaligned.

enter image description here

What do I do if I want the arrow of the popover pointing to the button no matter how wide it is?

Thanks

Answer

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

enter image description here

CodePen

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.