Twitter bootstrap 为什么Bootstrap4工具提示与链接分离，我如何修复它？

我制作了一个有粘性页脚的网站模板。它使用了一种常见的粘脚方法，我已经使用过很多次了。因为该模板使用的是Bootstrap4（现在是beta版），所以它提供了一种简单的方法来获得一个漂亮的工具提示。问题在于，如果页面内容向下推压页脚，则工具提示将从它应该附加到的链接分离

我真的希望工具提示独立于页面内容的数量，但我已经尝试了各种方法，无法找出哪里出了问题以及如何修复它。我想问一下，您不建议我使用不同类型的粘性页脚。保持粘性页脚CSS和相关HTML完好无损是很重要的

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

代码笔：

HTML:

JS（jQuery）：

---

在处理这个问题时，我发现当给予html和正文100%高度的CSS被删除时，工具提示开始起作用。因为Bootstrap4Beta使用popper作为工具提示，所以我在Google上搜索了与html或body上100%高度相关的popper bug，结果只有一个

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

Popper错误报告：

旧版本的popper.js，适用于高度为100%的正文和html： v1.9.3

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

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;
}

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