Bootstrap tool-tip (引导工具)-tip(提示)并选择下拉菜单overlap (重叠问题

Question

我正在处理标签上有工具提示的布局，并带有选择下拉列表。

Codepen

如果我们打开下拉列表，然后将鼠标悬停在工具提示的标签上，则两者都会重叠。我已经尝试给最大的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

您只能使用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 2

正如我在评论中所说的，我不认为你可以改变这个行为，因为它是由浏览器处理的。一个想法是将焦点从select on hover中移除，并使下拉列表消失：

​

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

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

这是一种解决方法，但如果工具提示包含选择，则可以使用此方法

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