tooltip the data-placement="right" is not working [edit]

Question

First of all, the tooltip is working for all the direction, top, bottom and left. But for the right is not working.

So I think that maybe is a problem with the CSS or HTML structure. (But the tooltip is in a position absolute, so I don't know why is this happening. )

HTML

<li class="">
    <div class="hover-highlight ml-2">
        <a class="" href="#">
            <i data-toggle="tooltip"  title="Dashboard" class="icon-meter"></i>
            <span>Dasboard</span>
        </a>
    </div>
</li>

In the javascript I am doing this:

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        placement: 'right'
    });
});

Like I said, for any other placement it is working fine. But for the right it broke!

In fact, I don't know why, but it is rendering with the left properties:

<div class="tooltip fade show bs-tooltip-left" role="tooltip" id="tooltip558151" style="position: absolute; transform: translate3d(125px, 207px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="left">
    <div class="arrow" style="top: 8px;" />
    <div class="tooltip-inner">Dashboard</div>
</div>

The problem

Okay, I found the problem. looks like automatically bootstrap push your text according to the parent div. For example, if your tooltip is at the right of the window, you can't force it to be placed into the right.

I don't know how to fix this behaviour.

CODE

Please, check the code here:

Answer 1

the problem is the margins of div, take a look:

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]',placement: 'top' });
});

.theproblem {
  margin-left:140px;
  margin-top:140px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div data-toggle="tooltip" title="Gestión de Usuarios" class="theproblem">
    Hola mundo
    </div>
  </div>
	
</div>

also Fiddle