Changing the position of Bootstrap popovers based on the popover s X position in relation to window edge

Question

I have scoured the Internet far and wide and while I found this stackoverflow post insightful Is it possible to change the position of Bootstrap popovers based on screen width   it still didn t answer my question  likely due to my trouble understanding position offset   Here s what I m trying to do  I want the Twitter Bootstap Popover position to be RIGHT unless the hotspot popover will be positioned beyond the viewport  then I want it to be positioned LEFT  I m making an iPad web app that has hot spots  when you push on a hotspot  information appears but I don t want it to appear outside of the viewport when horizontal scrolling is locked   I m thinking it d go something like this       infopoint   popover           trigger  hover           animation  false          placement  wheretoplace              function wheretoplace            var myLeft     this  offset left           if  myLeft lt 500  return  left           return  right           Thoughts  Thanks

User · Answer

So I figured out a way to do this effectively. For my particular project I'm building an iPad website so I knew exactly what the pixel X/Y value would be to reach the edge of the screen. Your thisX and thisY values will vary.

Since the popovers are being placed by inline styling anyway, I simply grab the left and top values for each link to decide which direction the popover should be. This is done by appending html5 data- values that .popover() uses upon execution.

if ($('.infopoint').length>0){
    $('.infopoint').each(function(){
        var thisX = $(this).css('left').replace('px','');
        var thisY = $(this).css('top').replace('px','');
        if (thisX > 515)
            $(this).attr('data-placement','left');
        if (thisX < 515)
            $(this).attr('data-placement','right');
        if (thisY > 480)
            $(this).attr('data-placement','top');
        if (thisY < 110)
            $(this).attr('data-placement','bottom');
    });
    $('.infopoint').popover({
        trigger:'hover',
        animation: false,
        html: true
    });
}

Any comments/improvements are welcome but this gets the job done if you're willing to put the values in manually.

User · Answer

Based on the documentation you should be able to use auto in combination with the preferred placement e g  auto left  http   getbootstrap com javascript  popovers   When  auto  is specified  it will dynamically reorient the popover  For example  if placement is  auto left   the tooltip will display to the left when possible  otherwise it will display right    I was trying to do the same thing and then realised that this functionality already existed

User · Answer

You can also try this one if u need it in almost all places in the page   U can configure it in a general way then just use it   In this way u can also use HTML element and anything u want      x000D   x000D    document  ready function   x000D                      x000D    var options   x000D          x000D          placement  function  context  source  x000D            x000D            var position     source  position    x000D            var content width   515     Can be found from a JS function for more dynamic output x000D            var content height   110     Can be found from a JS function for more dynamic output x000D   x000D            if  position left  gt  content width  x000D              x000D              return  left   x000D              x000D   x000D            if  position left  lt  content width  x000D              x000D              return  right   x000D              x000D   x000D            if  position top  lt  content height  x000D              x000D              return  bottom   x000D              x000D   x000D            return  top   x000D            x000D            trigger   hover  x000D            animation   true  x000D            html  true  x000D           x000D        data-toggle  popover     popover options   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 12 0 jquery min js  gt  lt  script gt  x000D   lt link href  http   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt div class  container  gt  x000D    lt h3 gt Popover Example lt  h3 gt  x000D    lt a id  try ppover  href     data-toggle  popover  title  Popover HTML Header  data-content   lt div class  jumbotron  gt Some HTML content inside the popover lt  div gt   gt Toggle popover lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Addition       For setting more options  u can go here       Even more can be found here    Update    If u want the popup after click  u can change the JS option to trigger   click  like this-          return                            trigger   click                  U also can customize it in HTML ading data-trigger  click  like this-   lt a id  try ppover  href     data-toggle  popover  data-trigger  click  title  Popover Header  data-content   lt div class  jumbotron  gt Some content inside the popover lt  div gt   gt Toggle popover lt  a gt    I think it will be more oriented code and more re-usable and more helpful to all

User · Answer

I solved my problem in AngularJS as follows    var configPopOver             animation  500          container   body           placement  function  context  source                        var elBounding   source getBoundingClientRect                        var pageWidth   angular element  body   0  clientWidth                     var pageHeith   angular element  body   0  clientHeith                      if  elBounding left  gt   pageWidth 0 34   amp  amp  elBounding width  lt   pageWidth 0 67                             return  left                                              if  elBounding left  lt   pageWidth 0 34   amp  amp  elBounding width  lt   pageWidth 0 67                             return  right                                              if  elBounding top  lt  110                           return  bottom                                              return  top                              html  true          This function do the position of Bootstrap popover float to the best position  based on element position

User · Answer

scope popoverPostion   function event        scope pos               if event x  lt   207  amp  amp  event x  gt   140               scope pos    top              event x                       else if event x  lt  140               scope pos    top-left              event x                       else if event x  gt  207               scope pos    top-right              event x

User · Answer

For Bootstrap 3  there is  placement   auto right    which is easier  By default  it will be right  but if the element is located in the right side of the screen  the popover will be left  So it should be       infopoint   popover      trigger  hover      animation  false     placement   auto right

User · Answer

bchhun s answer got me on the right track  but I wanted to check for actual space available between the source and the viewport edge  I also wanted to respect the data-placement attribute as a preference with appropriate fallbacks if there wasn t enough space  That way  right  would always go right unless there wasn t enough space for the popover to show on the right side  for example  This was the way I handled it  It works for me  but it feels a bit cumbersome  If anyone has any ideas for a cleaner  more concise solution  I d be interested to see it   var options       placement  function  context  source        var  win   source  winWidth  popoverWidth  popoverHeight  offset  toRight  toLeft  placement  scrollTop        win     window        source     source       placement    source attr  data-placement        popoverWidth   400      popoverHeight   110      offset    source offset            Check for horizontal positioning and try to use it      if  placement match   right left             winWidth    win width          toRight   winWidth - offset left - source offsetWidth        toLeft   offset left         if  placement      left             if  toLeft  gt  popoverWidth              return  left                     else if  toRight  gt  popoverWidth              return  right                           else           if  toRight  gt  popoverWidth              return  right                     else if  toLeft  gt  popoverWidth              return  left                                   Handle vertical positioning      scrollTop    win scrollTop        if  placement      bottom           if    win height     scrollTop  -  offset top   source offsetHeight   gt  popoverHeight            return  bottom                 return  top             else         if  offset top - scrollTop  gt  popoverHeight            return  top                 return  bottom                trigger   click         infopoint   popover options

User · Answer

I just noticed that the placement option could either be a string or a function returning a string that makes the calculation each time you click on a popover-able link   This makes it real easy to replicate what you did without the initial   each function   var options         placement  function  context  source            var position     source  position             if  position left  gt  515                return  left                      if  position left  lt  515                return  right                      if  position top  lt  110               return  bottom                      return  top               trigger   click         infopoint   popover options

User · Answer

You can also try this one        Get target source position in viewport     Check whether space from bottom is less that your tooltip height     If space from bottom is less that your tooltip height  then just scroll page up    placement  function context  source       get target source position in viewport   var bounds     source  0  getBoundingClientRect          winHeight     window  height         check wheather space from bottom is less that your tooltip height   var rBottom   winHeight - bounds bottom       Consider 180    your Tooltip height     if space from bottom is less that your tooltip height  this will scrolls page up     We are keeping tooltip position is fixed at bottom     if  rBottom  lt  180          html  body   animate   scrollTop    document  scrollTop   180     slow           return  bottom

User · Answer

In addition to bchhun s great answer  if you want absoulte positioning  you can do this  var options         placement  function  context  source             setTimeout function                       context  css  top   source getBoundingClientRect   top  500     px              0           return  top              trigger   click         infopoint   popover options

User · Answer

You can use auto in data placement like data-placement  auto left   It will automatic adjust according to your screen size and default placement will be left

[jquery] Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to offset

Examples related to popover