为什么 bootstrap 4 工具提示与 link 分离，我该如何解决？

Question

我制作了一个带有粘性页脚的网站模板。它使用一种常见的粘性页脚方法，我已经用过很多次了。因为模板使用的是 bootstrap 4（现在是测试版），所以它提供了一种简单的方法来获得样式漂亮的工具提示。问题是，如果页面内容将页脚向下推，那么工具提示就会从它应该附加到的 link 上分离。

我非常希望工具提示独立于页面内容的数量，但我已经尝试了各种方法，但无法弄清楚问题出在哪里以及如何解决。我想问你不建议我使用不同类型的粘性页脚。保持粘性页脚 CSS 和相关 HTML 完整无缺很重要。

我只需要知道为什么当页面内容将页脚向下推时工具提示会分离，以及无论存在多少页面内容如何保持工具提示附加。

代码笔：https://codepen.io/skunkbad/pen/prrOWR

HTML:

<div class="wrapper">
    <main class="main">
        <p>Please scroll</p><p>down, and</p><p>see that</p><p>there is a</p><p>link in the</p><p>footer.</p><p>The link has</p><p>a bootstrap tooltip</p><p>applied. The problem</p><p>is that if the</p><p>content in this #main</p><p>div is large </p><p>enough to start</p><p>pushing the footer down,</p><p>then the tooltip detaches</p><p>from the link.</p>
    </main>
    <div class="push"></div>
</div>
<footer class="footer">
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me and see that the tooltip is about 100px above me.</a>
</footer>

CSS:

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -75px;
}

.push {
  height: 75px;
}

.footer {
    background: red;
  height: 75px;
}

.footer a {
  color: #fff;
}

JS (jQuery):

$('footer a').tooltip();

Answer 1

在解决这个问题时，我发现当 CSS 给出 html 和 body 高度为 100% 被移除时，工具提示开始起作用。因为 bootstrap 4 beta 在他们的工具提示中使用了 popper，所以我在 Google 上搜索了与 html 或 body 上 100% 高度相关的 popper 错误，并且有一个。

根据对错误的评论，bootstrap 推荐的 popper.js 版本有一些旧版本中不存在的错误，至少目前，我的解决方案是恢复到 popper.js.

的旧版本

Popper 错误报告： https://github.com/FezVrasta/popper.js/issues/302

旧版本的 popper.js 可以正常工作的 body 和 html 高度 100%： v1.9.3

为什么 bootstrap 4 工具提示与 link 分离，我该如何解决？

Why is bootstrap 4 tooltip detached from link, and how can I fix it?

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4