Всплывающая подсказка Bootstrap 3.3.5 всегда отображается за модальной, несмотря на настройку контейнера - PullRequest
Новая
       49

Всплывающая подсказка Bootstrap 3.3.5 всегда отображается за модальной, несмотря на настройку контейнера

0 голосов
/ 31 мая 2018

Насколько мне известно, это не дубликат, несмотря на то, что кажется.Используя bootstrap 3.3.5, я попытался показать всплывающие подсказки для элементов внутри уникального модального диалога, но они всегда отстают от модального диалога и его полупрозрачного фона.Я следовал советам, данным в другом месте, я установил контейнер.Фактически я использовал 4 способа, чтобы установить контейнер безрезультатно:

  1. Используя стандартный атрибут разметки: data-container=".modal-body" (и дюжина других возможных селекторов, напрасно).
  2. Использование параметров функции подсказки: container.find("[data-toggle='tooltip']").tooltip({ container: ".modal-body" });
  3. Настройка data-container с помощью функции jQuery data: container.find("[data-toggle='tooltip']").data("container", ".modal-body").tooltip();
  4. Настройка data-container с помощью jQuery attr функция: container.find("[data-toggle='tooltip']").attr("data-container", ".modal-body").tooltip();

Есть предложения?Можно предложить повысить z-индекс всплывающей подсказки с помощью CSS, но, глядя на полупрозрачный фон, я также замечаю, что расположение всплывающей подсказки не совсем корректно.Так что дело не только в z-index.

Спасибо за вашу помощь!

PS Это одинаково для всех браузеров.

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

После тщательного изучения я обнаружил, что указанное выше неправильное размещение всплывающих подсказок на модальных моделях связано с помехами, вызванными jQueryUI.Простое опущение jQueryUI восстанавливает всплывающие подсказки по модалам.Обратите внимание, что, помимо модов, jQueryUI не вредит подсказкам для других элементов на странице.

Спасибо, что нашли время помочь.

0 голосов
/ 31 мая 2018

На документы BS

Функциональность Opt-in

По соображениям производительности, данные-apis Tooltip и Popover являются дополнительными, то есть вы должны инициализировать их самостоятельно.

Один из способов инициализации всех всплывающих подсказок на странице состоит в том, чтобы выбрать их по их атрибуту переключения данных: 

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

РЕДАКТИРОВАТЬ : изменено для применения всплывающей подсказки какопределяется вашим примером 

$('[data-toggle="tooltip"]').tooltip();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
        <label id="lblWTooltip">Hello World</label>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
...