无需 JavaScript 即可模拟 bootstrap side popover

我有一个仅支持现代浏览器的网站。

我喜欢 bootstrap popover 的美感，但真的不喜欢它如何依赖 jquery 小部件和 javascript 来定位箭头。我理解为什么它曾经是必要的，但现在确实不应该了。

我想看看我是否能得到类似的东西带有侧箭头的引导弹出窗口 http://getbootstrap.com/javascript/#popovers使用所有受支持的 css3 技术创建（因此 flexbox 等都在发挥作用）。

我可以非常接近 http://jsbin.com/niponibi/1/edit?html,css,output.

这是我的（玉）html。我将有一个包含一些内容的段落，后面是一个输入，该输入在右侧有一个弹出窗口，并有一个指向它的箭头，后面是更多内容。

    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.

这是我用来非常接近的样式表（less）（当然实际上我会有一个箭头的 svg 图像而不是使用 :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;
      }
    }        
  }
}

我遇到的最大问题是我正在使用white-space: nowrap将弹出窗口定位到输入的一侧。这正确地对齐了箭头，但增加了.popout-container在上面的内容和输入之间创建空间。此外，html 文档中与弹出窗口处于相同位置的任何元素都显示在其顶部（因为它不是绝对定位的）。

我可以使用 flexbox 来定位 http://jsbin.com/niponibi/3/edit?html,css,output弹出窗口到输入的一侧。使用margin: auto箭头正确对齐，但现在弹出窗口完全包含在与内容相同的框中。

弹出窗口确实需要position: absolute但即使使用弹性盒这会将弹出窗口从容器中分离出来，并且不再对齐箭头 http://jsbin.com/niponibi/4/edit?html,css,output.

有没有办法达到这样的效果呢？我怀疑解决方案是使用 csscalc功能和position: absolute但我不太明白。

例如使用弹性盒、绝对位置和重新定位弹出框margin-top: calc(-50% + 8px) http://jsbin.com/niponibi/7/edit?css,output在特定窗口大小的 chrome 上看起来相当不错，但在 firefox 和不同窗口大小下需要不同的值（为什么！？），并且在 IE 11 上根本不对齐箭头（同样，为什么？IE11 支持display: flex and margin: auto正好）。

视觉部分非常简单，无需求助于 SVG。它是不是太难 http://jsfiddle.net/luxfx/L5dKv/2/使用 CSS :before 制作漂亮的箭头。例如。：

&:before {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        background: inherit;
        bottom: -8px;
        left: calc(unquote('50% - 7px'));
        transform: rotate(45deg);
    }

正如您所说，最困难的部分是定位，尤其是垂直定位。我怀疑这是引导脚本涉及的大部分内容。

我发现 calc() 是两个方向定位的最佳工具，尽管与 SASS 或 LESS 一起使用有点痛苦，因为 calc() 也是内置的，然后你必须用unquote('').