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.

Solution 1

This works. Tested.

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

Solution 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>

Solution 3

I've created a jQuery plugin that provides 4 additonal placements: topLeft, topRight, bottomLeft, bottomRight

You just include either the minified js or unminified js and have the matching css (minified vs unminified) in the same folder.

https://github.com/dkleehammer/bootstrap-popover-extra-placements

Solution 4

Popover's Viewport (Bootstrap v3)

The best solution that will work for you in all occassions, especially if your website has a fluid width, is to use the viewport option of the Bootstrap Popover.

This will make the popover take width inside a selector you have assigned. So if the trigger button is on the right of that container, the bootstrap arrow will also appear on the right while the popover is inside that area. See jsfiddle.net

You can also use padding if you want some space from the edge of container. If you want no padding just use viewport: '.container'

$('#popoverButton').popover({
   container: 'body',
   placement: "bottom",
   html: true,   
   viewport: { selector: '.container', padding: 5 },
   content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
 });

in the following html example:

<div class="container">
   <button type="button" id="popoverButton">Click Me!</button>
</div>

and with CSS:

.container {
  text-align:right;
  width: 100px;
  padding: 20px;
  background: blue;
}

Popover's Boundary (Bootstrap v4)

Similar to viewport, in Bootstrap version 4, popover introduced the new option boundary

https://getbootstrap.com/docs/4.1/components/popovers/#options

Solution 5

I solved this (partially) by adding some lines of code to the bootstrap css library. You will have to modify tooltip.js, tooltip.less, popover.js, and popover.less

in tooltip.js, add this case in the switch statement there

case 'bottom-right':
          tp = {top: pos.top + pos.height, left: pos.left + pos.width}
          break

in tooltip.less, add these two lines in .tooltip{}

&.bottom-right { margin-top:   -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }

do the same in popover.js and popover.less. Basically, wherever you find code where other positions are mentioned, add your desired position accordingly.

As I mentioned earlier, this solved the problem partially. My problem now is that the little arrow of the popover does not appear.

note: if you want to have the popover in top-left, use top attribute of '.top' and left attribute of '.left'

View more solutions

Comments

[Rootical V.]

This is not the solution 'cause there could be plenty of popovers on a page.

[Anders]

You plugin destroys for MVVM libs like knockout because it detaches the element from tbe body

[rboarman]

Then all you need to do is change your selector

[Michael Galaxy]

The arrow is so small - barely noticeable. How can I make it bigger?

[user]

@Pantera61 : What part of the code should I hack to detect collision between 2 popovers? i.e. when 2 nearby popovers are partially overlapping, I want to change their placement dynamically to be away from each other.

[mahemoff]

I don't think this works in general because the popover isn't a child of the trigger element. It will only work if the trigger element is on the right of an relative-positioned container.

[jbyrd]

That's an aweful solution - you're hard-coding position values in a popover whose dimensions and position are dynamic. I just tried adding that style in dev tools on getbootstrap.com/javascript/#popovers, and unsurprisingly, it didn't work.

[CMS]

i like that we can set the styles with jquery and works jsut fine in my case and i jsst added more to the selector to narrow the selection

[Jonathon Hibbard]

This is definitely the best answer. Setting viewport is the key to solving this issue. The additional css is personal preference

[Jonathon Hibbard]

A poster below actually has the answer that should probably be the accepted one. He calls out that viewport is how to get this properly positioned. This allows the container to be bound to a constraint without the need of manually overriding the position (especially to a fixed/set position)

[agent47]

do u know how to move the tooltip to the left or right in bootstrap popover using the above code, if so can u please share a js fiddle

[Datsos]

this depends on the container selector you use for viewport. in the above example, if you remove text-align: right from .container then the tooltip will have the other direction

[Batman]

The viewport option was removed in V4

[Zoltán Süle]

I wanted to add this viewport argument as a data-viewport attribute and it doesn't work. It throws this error: Error: Syntax error, unrecognized expression: {selector: '.container', padding: 6}

[Datsos]

Hello mate, are you sure you use Bootstrap version 3? As said in previous comment, this is removed in bootstrap 4.

[Datsos]

I am also not sure if it works as data attribute. Not all properties do. Haven't tried it myself

[Majte]

One more thing for those who try this out; one might want to add data-boundary="window" for the popover element as otherwise the re-positioning is limited by the element's dimensions.