CODEWITHSUNDEEP
javascriptbootstrap-4tooltip
ValRob
ValRob

Reputation: 2682

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

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:

Upvotes: 9

Views: 24060

Answers (7)

ILiyan Dimitrov
ILiyan Dimitrov

Reputation: 61

I had the same problem and it was because the parent div's overflow was set to auto. So I changed it from overflow: auto to: overflow: visible and that fixed the problem.

Upvotes: 0

Jaimerine
Jaimerine

Reputation: 301

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

Upvotes: 6

Werner Diwischek
Werner Diwischek

Reputation: 191

I struggled with the differences between bootstrap4 using "data-toggle" and "data-placement" and bootstrap5 using "data-bs-toggle" and "data-bs-placement".

Upvotes: 9

sam ruben
sam ruben

Reputation: 385

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
});

Upvotes: 1

20yco
20yco

Reputation: 906

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

Upvotes: 5

Nisharg Shah
Nisharg Shah

Reputation: 19542

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>

Upvotes: 0

Eliabe Fran&#231;a
Eliabe Fran&#231;a

Reputation: 89

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

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

Upvotes: -1

Related Questions