How to position a Bootstrap popover?

Question

I'm trying to position a Bootstrap popover for a trigger that sits on the far top-right corner of a 960px wide web page.

Ideally, I'd position it on the bottom and move the arrow with CSS (so the arrow is on the top-right of the popover). Unfortunately the 'placement':'bottom' positioning is not enough, since it will center it below the trigger.

I'm looking for solution that will place the popover statically below and on the left of the trigger.

Answer 1

This works. Tested.

.popover {     top: 71px !important;     left: 379px !important; } 

Answer 2

Simply add an attribute to your popover! See my JSFiddle if you're in a hurry.

We want to add an ID or a class to a particular popover so that we may customize it the way we want via CSS.

Please note that we don't want to customize all popovers! This is terrible idea.

Here is a simple example - display the popover like this:

// We add the id 'my-popover'  $("#my-button").popover({      html : true,      placement: 'bottom'  }).data('bs.popover').tip().attr('id', 'my-popover');

#my-popover {      left: -169px!important;  }  #my-popover .arrow {      left: 90%  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>    <button id="my-button" data-toggle="popover">My Button</button>