Why is tooltip misplaced?

Question

I know that maybe it's something stupid but I can't get my tooltips in the right position, they are always off position

I've looked up here for answers and I tried changing the scripts order, adding others scripts, taking out scripts, and so on, but nothing seems to work.

here is my scripts

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

this is how I initialise the tooltips

    $('[data-toggle="tooltip"]').tooltip({
        container: 'body'
    });

and this is the tooltip

    <a class="social-button shape-rounded sb-facebook" href="#" data-toggle="tooltip" data-placement="top" title="Facebook" data-original-title="Facebook">
             <i class="fab fa-facebook-f"></i>
    </a>

and this is the current result

UPDATE

Adding more space on top as suggested also didn't work

Answer 1

You need to set margin-top to your div which wraps your tooltips in order to show your tooltip at top. Below is the working snippet

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

.container {
  margin: 100px;
  text-align: center
}

a {
  margin: 0px 20px;
  padding:20px
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <a class="border" href="#" data-toggle="tooltip" data-placement="top" title="Facebook"> <i class="fab fa-facebook-f"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="bottom" title="twitter"> <i class="fab fa-twitter"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="left" title="instagram"> <i class="fab fa-instagram"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="right" title="linkedin"> <i class="fab fa-linkedin"></i></a>
</div>