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

Question

I am working with layout that have tool-tip on label with select drop-down.

Codepen

If we open drop-down and then hover on label for tool-tip both overlaps. I have tried giving max z-index to tool-tip but it is not working.

The reason looks like tool-tip is having position-absolute and may be select drop-down is position fixed!

To inspect tooltip that keeps it open.

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

As I said in the comment, I don't think you can change this behavior since it's handled by the browser. One idea would be to remove the focus from the select on hover and make the dropdown disappear:

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

You can do it with CSS only:

[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

You can hide the select element if you hover the tooltip Try it online

It's a workaround but if the tooltip covers the select this can be used

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