Bootstrap工具提示和選擇下拉重疊問題

Question

我正在使用帶有選擇下拉列表標簽上的工具提示的布局。

Codepen

如果我們打開下拉列表，然后將鼠標懸停在標簽上以便工具提示重疊。 我已經嘗試將max z-index賦予工具提示但它無法正常工作。

看起來像刀尖的原因是位置絕對可以選擇下拉位置固定！

檢查保持打開的工具提示 。

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

您可以隱藏選擇元素，如果你懸停提示在線試玩

這是一種解決方法，但如果工具提示涵蓋了選擇，則可以使用

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