Keep Popover centered relative to a button

Question

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

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

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

Thanks

Answer 1

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

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.

Keep Popover centered relative to a button

Sign up