Emulate the bootstrap side popover without javascript

Vote count:

0

I have a site that supports only modern browsers.

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.

I'm trying to see if I can get something that looks like the bootstrap popover with a side arrow created using the full range of supported css3 techniques (so flexbox et. all are in play).

I can get pretty close.

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 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.

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

.popout-container {
  white-space: nowrap;
  &>* {
    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;
      &:after {
        content: "<";
        margin: auto;
        background-color: white;
        margin-right: -1px;
        z-index: 100;
      }
    }        
  }
}

The big issue that I have is that I am using white-space: nowrap to position the popover to the side of the input. This correctly aligns the arrow but grows the .popout-container 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).

I can instead use flexbox to position the popover to the side of the input. Using margin: auto the arrow aligns correctly but now the popover is contained completely inside the same box as content.

The popover really needs to be position: absolute but even with flexbox this breaks the popover out of it container and no longer aligns the arrow.

Is there a way to get this effect? I suspect that the solution is to use the css calc function and position: absolute but I can't quite figure it out.

asked 39 secs ago

George Mauer

21.5k