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

user_3346970 0
Viewed 12906

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:

bootstrap-4 tooltip javascript
6 Answers

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

user_45502520

Best solution:

$('[data-toggle="tooltip"]').each(function() {

  $(this).data('bs.tooltip').config.placement = 'right';// For dynamic position
  $(this).data('bs.tooltip').config.boundary= 'right'; // Used for tooltip boundary range
});
user_83235900
user_108397960

I believe you should put the placement in a data property of the element:

<button data-toggle="tooltip" data-placement="left"> tooltip </button>
user_84643370

You should put the text in a data property of the element

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        placement: 'right'
    });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<li class="">
  <div class="hover-highlight ml-2">
    <a class="" href="#">
        <i data-toggle="tooltip" title="Dashboard" class="icon-meter">
          <span>Dasboard</span>
        </i>
      </a>
  </div>
</li>               
                
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

user_87982200

In the event this helps anyone arriving here in future, the fix for a similar issue I encountered was setting the boundary to "window" which prevents the tooltip from being constrained to within it's parent. See https://getbootstrap.com/docs/4.0/components/tooltips/#options for additional options.

<button title="tooltip text" data-toggle="tooltip" data-placement="right" data-boundary="window">
user_141895510
Related