Question

我正在使用在标签上带有工具提示并带有选择下拉菜单的布局。

如果我们打开下拉菜单，然后将鼠标悬停在标签上以获得工具提示，这两个标签将重叠。我曾尝试将max-z-index赋予工具提示，但是它不起作用。

原因似乎是工具提示具有绝对位置，并且可能选择下拉列表的位置固定！

要检查tooltip使其保持打开状态。

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

.tooltip {
  z-index: 2147483647 !important;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <label data-toggle="tooltip" data-placement="bottom" title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsum ratione, soluta veritatis iure earum impedit cumque animi aspernatur distinctio ad omnis. Id, doloribus accusamus nam cupiditate repellat officia aspernatur.">
          Label with tooltip
        </label>
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
    </div>
  </div>
</div>

Answer 1

正如我在评论中所说，我认为您无法更改此行为，因为它是由浏览器处理的。一种想法是将焦点从悬停选择上移开并使下拉列表消失：

$(function() {
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  }).hover(function(){
    $('select').blur();
  })
});

.tooltip {
  z-index: 2147483647 !important;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <label data-toggle="tooltip" data-placement="bottom" title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsum ratione, soluta veritatis iure earum impedit cumque animi aspernatur distinctio ad omnis. Id, doloribus accusamus nam cupiditate repellat officia aspernatur.">
          Label with tooltip
        </label>
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
    </div>
  </div>
</div>

Answer 2

您只能使用CSS来做到这一点：

[data-toggle=tooltip]:hover ~ select:focus{
  display:none;
}

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

.tooltip {
  z-index: 2147483647 !important;
}

[data-toggle="tooltip"]:hover~select:focus {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <label data-toggle="tooltip" data-placement="bottom" title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, ipsum ratione, soluta veritatis iure earum impedit cumque animi aspernatur distinctio ad omnis. Id, doloribus accusamus nam cupiditate repellat officia aspernatur.">
          Label with tooltip
        </label>
        <select class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
    </div>
  </div>
</div>

Answer 3

如果将鼠标悬停在工具提示上，则可以隐藏选择元素 Try it online

这是一种解决方法，但如果工具提示涵盖了选择内容，则可以使用

$( "label" ).hover(
  function() {
    $( "select" ).hide();
  }, function() {
    $( "select" ).show();
  }
);

Bootstrap工具提示并选择下拉重叠问题

3 个答案: