css - 在没有 javascript 的情况下模拟 Bootstrap 侧弹出窗口

Question

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

我喜欢 bootstrap popover 的美学，但真的不喜欢它如何依赖 jquery 小部件和 javascript 来定位箭头。我理解为什么它曾经是必需的，但实际上不再需要了。

我想看看能不能得到看起来像 bootstrap popover with a side arrow 的东西使用各种受支持的 css3 技术创建(因此 flexbox 等都在发挥作用)。

I can get pretty close .

这是我的 (jade) 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.

这是我用来非常接近的样式表(较少)(当然实际上我会有一个 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 文档中跟在与弹出窗口相同位置的任何元素都出现在它的顶部(因为它不是绝对定位的)。

I can instead use flexbox to position弹出窗口到输入的一侧。使用 margin: auto 箭头正确对齐，但现在 popover 完全包含在与内容相同的框中。

popover 确实需要 position: absolute 但即使使用 flexbox this breaks the popover out of it container and no longer aligns the arrow .

有没有办法得到这种效果？我怀疑解决方案是使用 css calc 函数和 position: absolute 但我不太明白。

例如using flexbox, position absolute and repositioning popover with margin-top: calc(-50% + 8px)在特定窗口大小的 chrome 上看起来相当不错，但在 firefox 和不同的窗口大小下需要不同的值(为什么!？)，并且在 IE 11 上根本不对齐箭头(同样，为什么？IE11 支持 display : flex 和 margin: auto 就好了)。

Answer 1

视觉部分非常简单，无需求助于 SVG。这是not too hard使用 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('') 的等式。