Sunday, May 12, 2024
Homepage · bootstrap-4
 Popular · Latest · Hot · Upcoming
42
rated 0 times [  43] [ 1]  / answers: 1 / hits: 16707  / 5 Years ago, tue, january 8, 2019, 12:00:00

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:


More From » bootstrap-4
 Answers
14

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


[#52812] Thursday, January 3, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
emiliano
Add To Favorites
Follow
Total Points: 381
Total Questions: 109
Total Answers: 93
Location: Jersey
Member since Fri, Oct 1, 2021
3 Years ago
emiliano questions
Tue, Sep 1, 20, 00:00, 4 Years ago
Sun, Jul 26, 20, 00:00, 4 Years ago
Fri, Jun 12, 20, 00:00, 4 Years ago
Thu, Jun 4, 20, 00:00, 4 Years ago
Sat, Apr 25, 20, 00:00, 4 Years ago
View All
;