title: BootstrapUI: Popover cut off by page end
body: <p>These are AngularUI Bootstrap popovers, which are written in Angular instead of jQuery.</p>
  
  <p>I have a popover in a <a href="http://plnkr.co/edit/H1aeQu9ifBe0zyMzC845?p=preview" rel="nofollow noreferrer">plnkr</a> that is working, but it's positioning is messed up.  It is being cut in half by the page.</p>
  
  <p><a href="https://i.stack.imgur.com/l8x4h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l8x4h.png" alt="enter image description here"></a></p>
  
  <p>When I inspect the popover's CSS, I see some code which doesn't make any sense to me.  I understand what it's doing, but where are these <code>element.style</code> properties coming from?  They seem to be the problem.</p>
  
  <pre><code>element.style {
    top: -139px;
    left: 112px;
    display: block;
  }
  
  .popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    line-break: auto;
  }
  </code></pre>
  
  <p>There isn't even a scroll option available.  Is there a way to position a popover so that the entirety of it appears on the page, regardless of where the button is?</p>