定位引导弹出框

Question

我正在尝试实现语言选择的弹出框，但遇到两个问题：

1) 当我将position: absolute; 应用于页脚时，弹出框隐藏在页脚上方。

2) 弹出框贴在我页面的右侧。我想要那里的保证金，但margin-right 似乎没有效果。

Here's a jsfiddle.

注意：较新版本的 bootstrap 可能不是这种情况，但我在我网站的其余部分使用这个，并且暂时无法迁移到较新版本...

编辑：我通过添加{container: 'body'}to the tooltip 解决了第一个问题。第二个仍然开放...

编辑2：我设法通过使用添加margin on the right：

.popover
{
  right: 10px !important;
  left: auto !important;
}

现在唯一的问题是箭头不再以箭头下方的文本为中心...有什么提示吗？

Answer 1

实现此目的的一种方法是将固定位置position:fixed; right:40px; 添加到您的#wrapper。这将允许您向左或向右调整您的位置。但是，如果您尝试调整顶部或底部，它将脱离其父容器并相对于文档。因此，如果您需要对顶部或底部进行调整，请使用边距。

#wrapper{
  min-height: 50px;
  max-height: 100px;
  display: flex;
  align-items: center;
  position:fixed;
  right:40px;
}