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

how come you use the body as the container? shouldn't the container just be the element hovered? — Pete, Jul 02 '19 at 14:24
@Pete that was a solution found here, but it didn't work I forgot to remove it — Manuel Gonçalves, Jul 02 '19 at 14:26
Seems to appear on top if there is enough room above: https://jsfiddle.net/2jdhrpuk/3, if not, then it will; put it below: https://jsfiddle.net/qgmbsoey/ — Pete, Jul 02 '19 at 14:34
My point is it works out of the box, so it must be some of the extra styles that you have added, without a [mcve] there is really nothing we can do to help — Pete, Jul 02 '19 at 14:44
@Pete I copied and pasted a bootstrap boton with tooltips and still the same — Manuel Gonçalves, Jul 02 '19 at 15:18
@ManuelGonçalves it's possible a Styling from Bootstrap is countering the styling added by jQuery UI. Have you tried with Bootstrap CSS and not the JS? — Twisty, Jul 03 '19 at 01:55
@ManuelGonçalves I have added a working snippet below, please have a look at it — Sai Manoj, Jul 04 '19 at 02:23
I know it's an old, unsolved mystery at this point, but I came across this thread as I was looking through possible solutions for the exact issue. In my case, the tooltip stays on top of the button, but it's about 100px higher up than where it should be, leaving it almost unnoticeable. Anyone got an update on how this could possibly be avoided? I added the `{container: 'body'}` specification for the function, as instructed by both BS5 and Popper docs, since elements like `.btn-group` are known to cause issues, which in my case seems to be it. Didn't do anything though. — Pepelius, Aug 26 '21 at 11:31

score 1 · Answer 1 · answered Jul 03 '19 at 05:13

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>

Why is tooltip misplaced?

1 Answers1