1

To my best effort, this is not a duplicate despite what it seems. Using bootstrap 3.3.5, I have tried to show tooltips on elements inside a unique modal dialog, but they always fall behind the modal dialog and its semi-transparent backdrop as well. I have followed the advice given elsewhere, I have set the container. In fact, I used 4 ways to set the container to no avail:

  1. Using the standard markup attribute: data-container=".modal-body" (and a dozen other possible selectors, in vain).
  2. Using the options of the tooltip funtion: container.find("[data-toggle='tooltip']").tooltip({ container: ".modal-body" });
  3. Setting the data-container via the jQuery data function: container.find("[data-toggle='tooltip']").data("container", ".modal-body").tooltip();
  4. Setting the data-container via the jQuery attr function: container.find("[data-toggle='tooltip']").attr("data-container", ".modal-body").tooltip();

Any suggestions? One could propose to boost the z-index of the tooltip via CSS, but seeing through the semi-transparent backdrop, I also observe that the positioning of the tooltip is not entirely correct. So it is not just a matter of z-index.

Thank you for your help!

PS this is consistent accross all browsers.

grammophone
  • 601
  • 6
  • 8

3 Answers3

0

Per BS docs

Opt-in functionality

For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

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

EDIT: Modified to apply tooltip as defined by your example

$('[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>
fnostro
  • 4,531
  • 1
  • 15
  • 23
  • Thank you for addressing the issue, but in all scenarios I call tooltip(), that's why tooltips are always shown but in a wrong way. – grammophone May 31 '18 at 20:43
  • ah yes - bootstrap and jquery UI are compatible but need some consideration, see [THIS](https://stackoverflow.com/questions/23428285/bootstrap-and-jqueryui-conflict) – fnostro May 31 '18 at 21:00
  • Your link was helpful. Reordering the order of includes, taking jQueryUI first then Bootstrap, remedies the tooltips on modals. It's funny that all other tooltips were not affected. This fact confused and misled me a lot. Maybe you could write this as an answer. Thank you. – grammophone May 31 '18 at 21:28
  • That would be a duplicate answer, there have been so many jqueryui/bootstrap issues on SO that there is now a [jquery-ui-bootstrap](https://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/) project on Git – fnostro Jun 01 '18 at 16:49
0

After exhaustive investigation, I found out that the above observed wrong placement of tooltips on modals is due to interference caused by jQueryUI. Plain omittance of jQueryUI restores tooltips on modals. Note that, apart modals, jQueryUI doesn't harm tooltips on other elements on the page.

Thank you for taking time to help.

grammophone
  • 601
  • 6
  • 8
0

$('[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>
Jatin Kumar
  • 1