Popper.js dropdown/tooltip 的初始位置错误

Question

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

我发现 CSS popper 的位置变换计算错误，不适合我的使用。但不明白，为什么它在滚动或任何 window 调整大小后重新计算为正确的数字。查看下面的 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 会更新弹出器的位置，因为它默认会侦听这些事件。

您应该在 .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;
  }
}

Popper.js dropdown/tooltip 的初始位置错误

Popper.js wrong initial position of dropdown/tooltip

javascript

tooltip

popper.js