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

User · Answer

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     amp  bottom-right   margin-top    -2px     amp  bottom-right  tooltip-arrow    popoverArrow  gt   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

User · Answer

This works  Tested    popover       top  71px  important      left  379px  important

User · Answer

Sure you can  Fortunately there is a clean way to do that and it is in the Bootstrap popover   tooltip documentation as well   let mySpecialTooltip       mySpecialTooltip    mySpecialTooltip tooltip    container   body    placement   bottom    html  true   template    lt div class  tooltip your-custom-class  role  tooltip  gt  lt div class  arrow  gt  lt  div gt  lt div class  tooltip-inner  gt  lt  div gt  lt  div gt          in your css file -   your-custom-class    bottom  your value      Make sure to add the template in bootstrap s tooltip documentation and add your custom class name and style it using css  And  that s it  You can find more about this on https   getbootstrap com docs 4 0 components tooltips

User · Answer

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

User · Answer

If you take a look at bootstrap source codes  you will notice that position can be modified using margin   So  first you should change popover template to add own css class to not get in conflict with other popovers       trigger   popover     html  true    placement   bottom     trigger   click     template    lt div class  popover popover--topright  role  tooltip  gt  lt div class  arrow  gt  lt  div gt  lt h3 class  popover-title  gt  lt  h3 gt  lt div class  popover-content  gt  lt  div gt  lt  div gt         Then using css you can easily shift popover position    popover popover--topright        margin-top  0px     Use to change vertical position      margin-right  40px     Use to change horizontal position       popover popover--topright  arrow     left  88   important     fix arrow position        This solution would not influence other popovers you have  Same solution can be used on tooltips as well because popover class inherit from tooltip class   Here s a simple jsFiddle

User · Answer

To bootstrap 3 0 0    popover  right 0 important      And modify too    popover   max-width WWWpx important       where WWW is your correct max-width to show your popover content

User · Answer

I had to make the following changes for the popover to position below with some overlap and to show the arrow correctly     js    case  bottom-right         tp    top  pos top   pos height   10  left  pos left   pos width - 40        break     css         popover bottom-right  arrow           left  20px     MODIFIED            margin-left  -11px          border-top-width  0          border-bottom-color   999          border-bottom-color  rgba 0  0  0  0 25           top  -11px                 popover bottom-right  arrow after           top  1px          margin-left  -10px          border-top-width  0          border-bottom-color   ffffff              This can be extended for arrow locations elsewhere    enjoy

User · Answer

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      x000D   x000D     We add the id  my-popover  x000D      my-button   popover   x000D      html   true  x000D      placement   bottom  x000D     data  bs popover   tip   attr  id    my-popover    x000D   my-popover   x000D      left  -169px important  x000D    x000D   my-popover  arrow   x000D      left  90  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt link href  https   netdna bootstrapcdn com bootstrap 3 0 0 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   netdna bootstrapcdn com bootstrap 3 0 0 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt button id  my-button  data-toggle  popover  gt My Button lt  button gt  x000D   x000D   x000D

User · Answer

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    lt strong gt Hello Wooooooooooooooooooooooorld lt  strong gt          in the following html example    lt div class  container  gt      lt button type  button  id  popoverButton  gt Click Me  lt  button gt   lt  div gt    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

User · Answer

Maybe you don t need this logic for a responsive behavior   E g   placement   auto left    Bootstrap 3 has auto value for placement  Bootstrap doc      When  auto  is specified  it will dynamically reorient the tooltip  For example  if placement is  auto left   the tooltip will display to the left when possible  otherwise it will display right

[javascript] How to position a Bootstrap popover?

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap

Examples related to css-position

Examples related to popover