Popper.js tooltips off center/ positioned wrong

Question

The tooltip isn't positioned directly underneath my social links. They are images, not glyphs, and they had margins to seperate them.

https://i.stack.imgur.com/a6LcM.jpg

I've attempted removing the margins.

.links {
  width: 100%;
  background-color: var(--main-background-color);
  height: 40px;
  line-height: var(--main-line-height);
  border-top: var(--border-lines);
}

.link-img {
  width: 30px;
  text-align: center;
  margin-right: 3%;
  transition: opacity .3s ease-in-out;
  opacity: 1;
}

.link-img2 {
  /*FIXES YOUTUBE CENTERING ISSUE*/
  width: 30px;
  text-align: center;
  transition: opacity .3s ease-in-out;
  opacity: 1;
}

<div class="links">
  <div class="sociallinks">
    <a href="https://www.facebook.com"><img class="link-img" src="img/socials/facebook.png" alt="Facebook" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="https://www.twitter.com/"><img class="link-img" src="img/socials/twitter.png" alt="Twitter" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="mailto:random@gmail.com?Subject=Website%20Enquiry"><img class="link-img" src="img/socials/mail.png" alt="Mail" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="https://www.instagram.com"><img class="link-img" src="img/socials/instagram.png" alt="Instagram" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
    <a href="https://www.youtube.com"><img class="link-img2" src="img/socials/youtube.png" alt="Youtube" data-toggle="tooltip" data-placement="bottom" title="Hooray!"></a>
  </div>
</div>