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的位置,因为它默认侦听这些事件.

您应该手动运行catsTooltip.scheduleUpdate()后,.toggle()将它正确定位.

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

Answer 2

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

我认为@Fez 和@Abdalla 的解决方案仍然有帮助，但对我来说，这与不小心使用display: none;我的工具提示容器有关。令人惊讶的是文档可以做什么，哈哈。

所以我对我的 .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;
  }
}