Winston Winston - 2 months ago 6
CSS Question

Keep Popover centered relative to a button

I am experimenting with this CSS popover found 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?



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.


.popover {
    width: 400px;
    left: -195px;


enter image description here


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.