Popper.js 下拉/工具提示的初始位置错误

Question

如果单击触发器，我正在使用 popper.js 显示更多帖子类别。但是在我点击它之后，初始位置是错误的（更正确）。当 popper 打开并且我滚动 popper 的位置时更新 - 这个状态需要是初始的。

我发现 popper 的 CSS 位置变换对我的使用计算错误。但不明白，为什么它在滚动或任何窗口调整大小后重新计算为正确的数字。检查下面的 Codepen。

我的 JS：

$(function () {
 var element = document.getElementById('more-cats');
 var dropdown = document.getElementById('tooltip');

 var catsTooltip = new Popper ( element, dropdown, {
      placement: 'bottom-end'
 });

 $(element).click(function(e) {
      $(dropdown).toggle();
      e.preventDefault();
 });

});

Codepen

谢谢，如果你有什么想法，我写错了哪部分代码。

Answer 1

这是因为 Popper.js 需要在 DOM 中呈现 popper 元素（也就是在文档中拥有一个位置）才能正确计算其位置。

当元素隐藏时初始化 Popper.js，然后切换其可见性以显示它，但 Popper.js 不知道发生了什么变化。

当您滚动页面或调整页面大小时，Popper.js 会更新您的 popper 的位置，因为它默认侦听这些事件。

您应该在.toggle() 之后手动运行catsTooltip.scheduleUpdate() 以使其正确定位。

https://codepen.io/FezVrasta/pen/PJjWWZ

Answer 2

只是想分享一下我为自己的工作所做的一切，以防万一它对其他人有所帮助。

我认为@Fez 和@Abdalla 的解决方案仍然会有所帮助，但对我来说，这与不小心将display: none; 用于我的工具提示容器有关。 Amazing what the documentation can do lol.

所以我对 .tooltip 容器所做的是：

/* Hide the popper when the reference is hidden */
.tooltip[data-popper-reference-hidden] {
  visibility: hidden;
  pointer-events: none;
}

.tooltip {
  // display: none; <---- don't do this 
  opacity: 1; // do this

  background-color: white;
  border: 1px solid #c6c6c6;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.2);
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: -1; // this keeps it from blocking other elements when it's hidden

  &:hover {
    visibility: visible;
    pointer-events: auto;
    opacity: 1; // oh yeah 
    z-index: 1;
  }
}