title: Emulate the bootstrap side popover without javascript
body: <p>I have a site that supports only modern browsers.</p>
  
  <p>I like the bootstrap popover aesthetic but really dislike how it relies on a jquery widget and javascript to position the arrow. I understand why it used to be necessary but it really shouldn't be anymore.</p>
  
  <p>I'm trying to see if I can get something that looks like the <a href="http://getbootstrap.com/javascript/#popovers" rel="nofollow">bootstrap popover with a side arrow</a> created using the full range of supported css3 techniques (so flexbox et. all are in play).</p>
  
  <p><a href="http://jsbin.com/niponibi/1/edit?html,css,output" rel="nofollow">I can get pretty close</a>.</p>
  
  <p>Here is my (jade) html. I would have a paragraph with some content, followed by an input with that input having a popover to the right with an arrow pointing to it, followed by more content.</p>
  
  <pre><code>    p some content.
      .popout-container
        input
        aside.popout
          .flex-container
            i.arrow
            .container
              p Here is a popout
              p It contains some text
      p some more content.
  </code></pre>
  
  <p>Here is the stylesheet (less) that I use to get very close (of course in reality I would have an svg image for the arrow rather than using :after content</p>
  
  <pre><code>.popout-container {
    white-space: nowrap;
    &amp;&gt;* {
      display: inline-block;
    }
  }
  .popout {
    .flex-container {
      display: flex;
  
      .container {
        border: 1px solid blue;
        border-radius: 5px;
        background-color: white;
        box-shadow: 5px 5px #ccc;
        padding: .5em;
      }
      .arrow {
        display: flex;
        flex-direction: column;
        &amp;:after {
          content: "&lt;";
          margin: auto;
          background-color: white;
          margin-right: -1px;
          z-index: 100;
        }
      }        
    }
  }
  </code></pre>
  
  <p>The big issue that I have is that I am using <code>white-space: nowrap</code> to position the popover to the side of the input. This correctly aligns the arrow but grows the <code>.popout-container</code> creating space between the content above and the input. Additionally any elements that follow in the html document that are in the same position as the popover appear on top of it (since it is not absolutely positioned).</p>
  
  <p><a href="http://jsbin.com/niponibi/3/edit?html,css,output" rel="nofollow">I can instead use flexbox to position</a> the popover to the side of the input. Using <code>margin: auto</code> the arrow aligns correctly but now the popover is contained completely inside the same box as content. </p>
  
  <p>The popover really needs to be <code>position: absolute</code> but even with flexbox <a href="http://jsbin.com/niponibi/4/edit?html,css,output" rel="nofollow">this breaks the popover out of it container and no longer aligns the arrow</a>.</p>
  
  <p>Is there a way to get this effect? I suspect that the solution is to use the css <code>calc</code> function and <code>position: absolute</code> but I can't quite figure it out.</p>
  
  <p>For example <a href="http://jsbin.com/niponibi/7/edit?css,output" rel="nofollow">using flexbox, position absolute and repositioning popover with <code>margin-top: calc(-50% + 8px)</code></a> look pretty good on chrome at a certain window size but requires different values on firefox and at different window sizes (why!?), and doesn't align the arrow at all on IE 11 (again, why? IE11 supports <code>display: flex</code> and <code>margin: auto</code> just fine).</p>