всплывающая подсказка data-place = "right" не работает [править] - PullRequest
Новая
       5

всплывающая подсказка data-place = "right" не работает [править]

0 голосов
/ 08 января 2019

Прежде всего, всплывающая подсказка работает для всех направлений, сверху, снизу и слева. Но по праву не работает.

Так что я думаю, что, возможно, это проблема со структурой CSS или HTML. (Но подсказка находится в абсолютной позиции, поэтому я не знаю, почему это происходит.)

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>

В JavaScript Я делаю это: 

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

Как я уже сказал, для любого другого размещения он работает нормально. Но по праву это сломалось!

На самом деле, я не знаю почему, но это рендеринг с левыми свойствами: 

<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><div class="tooltip-inner">Dashboard</div></div>

Проблема

Хорошо, я нашел проблему. Похоже, что при начальной загрузке ваш текст переместится в соответствии с родительским div. Например, если всплывающая подсказка находится справа от окна, вы не можете принудительно расположить ее справа.

Я не знаю, как исправить это поведение.

КОД пожалуйста, проверьте код здесь:

Ответы [ 3 ]

0 голосов
/ 08 января 2019

Вы должны поместить текст в свойство данных элемента 

$(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>
0 голосов
/ 08 января 2019

проблема в полях div, посмотрите: 

$(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>

также Скрипка

0 голосов
/ 08 января 2019

Я полагаю, вы должны поместить размещение в свойство данных элемента: 

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