Popper.js wrong initial position of dropdown/tooltip

Just wanted to share what i did for mine to work, just in case it helps someone else.

I think @Fez's and @Abdalla's solutions could still be helpful but for me it had to do with accidentally using display: none; for my tooltip container. Amazing what the documentation can do lol.

So what i did to my .tooltip container is this:

/* 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;
  }
}

That's because Popper.js needs the popper element to be rendered in the DOM (aka, have a position in the document) to be able to properly compute its position.

You are initializing Popper.js when the element is hidden, and then you toggle its visibility to show it, but Popper.js doesn't know that something changed.

When you scroll the page, or resize it, Popper.js updates the position of your popper because it listens by default to these events.

You should manually run catsTooltip.scheduleUpdate() after .toggle() to have it properly positioned.

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