1
我做了有粘性的页脚网站模板。它使用粘脚的常用方法之一，我已经使用过很多次。由于模板使用引导程序4（现在是测试版），因此它提供了一种简单的方法来创建一个不错的样式化工具提示。问题是，如果页面内容向下推动页脚，则工具提示将从它应该连接的链接分离。为什么引导程序4的工具提示脱离链接，我该如何解决它？
我真的很喜欢这个提示是独立的页面内容的数量，但我已经试过各种东西并不能找出什么是错的，如何解决它。我想问你，不建议我使用不同类型的粘性页脚。重要的是我保持粘性页脚CSS和相关的HTML完好无损。
我只需要知道为什么工具提示在页面内容压下页脚时分离，以及无论页面内容存在多少，如何保持附带工具提示。
CodePen：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();