title: Dynamic placement of Twitter-Bootstrap popover
body: <p>I'm trying to create a dynamic displacement function for bootstrap popovers, so that if the content is too large to be shown on the screen with "bottom" placement without a vertical scroll, it will show the popover upwards with "top" placement.</p>
  
  <p>For this, I created a function:</p>
  
  <pre><code>function popoverPlacement(popoverHeight, element) {
      var offset = element.offset().top;
      var height = popoverHeight;
      var docheight = $(document).height();
  
      if (offset + height &gt;= docheight) {
          return "top";
      }
      else {
          return "bottom"
      }
  }
  </code></pre>
  
  <p>Unfortunately, I need to specify the popoverHeight as a hardcoded value, since the content is generated for the popover and not added to the DOM, so I cannot obtain the height it will be.</p>
  
  <p>This is how it is used:</p>
  
  <pre><code>$(this).popover({
              placement: function () { return popoverPlacement(270, this.$element); },
              title: "Status",
              trigger: "click",
              content: editStatusContent,
              html: true,
              delay: {
                  show: 1,
                  hide: 1
              },
              animation: false
          });
  </code></pre>
  
  <p>Is there a dynamic way to achieve this?</p>
  
  <p>Thanks</p>