Всплывающие подсказки Popper.js не по центру / расположены неправильно - PullRequest
0 голосов
/ 18 января 2019

Подсказка не находится прямо под моими социальными ссылками. Это изображения, а не глифы, и у них были поля для их разделения.

https://imgur.com/a/VNiqLpz

Я пытался убрать поля.

.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>
...