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;用于工具提示容器有关。 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下拉/工具提示初始位置错误

2 个答案: