Question

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

我真的很喜欢工具提示独立于页面内容的数量，但我已经尝试了各种各样的东西，无法弄清楚什么是错的，以及如何解决它。我想问你不建议我使用不同类型的粘性页脚。重要的是我保持粘性页脚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();

Answer 1

在解决这个问题的同时，我发现当CSS的html和body高度为100％被删除时，工具提示开始表现。因为bootstrap 4 beta使用popper作为他们的工具提示，我在Google上搜索了与html或body上100％高度相关的popper bug，并且有一个。

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

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

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

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

1 个答案: