html - 无法设置 overflow-x visible 和 overflow-y auto

Question

首先，我知道之前有人问过这个问题。但是我找不到适合我的案例的正确解决方案。这就是为什么，我再次发布它。

所以我有一个侧边栏

<div className="LeftMenu">           
  <div style={{position:relative"}}>
     <div className= "icon-Back-office-icons_Logout1"}/>
       <span className="tooltiptext">Name 1</span>
   </div>
   <div style={{position:relative"}}>
     <div className= "icon-Back-office-icons_Logout2"}/>
       <span className="tooltiptext">Name2</span>
   </div>
</div>


.LeftMenu {
    background-color: white; // box-shadow: 1px 2px 9px 0 rgba(92, 131, 205, 0.06);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 24px;
    padding-bottom: 25px;
    height: 100%;
    z-index: 100;
    width: 100px;
    position: fixed;
    overflow-x: visible;
    overflow-y:auto;
    }

.tooltiptext:hover {
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

.tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

leftmenu div 包含许多子 div。将鼠标悬停在每个子元素上会显示一个工具提示。如果子 div 的长度增加，则必须显示垂直滚动。因此我给了overflow-y auto。但是工具提示必须是可见的，并且必须溢出左侧菜单。因此，我将 overflow-x 设为可见。

但这并没有像我想的那样起作用。

https://jsfiddle.net/jcj7k6kp/这是一个演示我的问题的 jsfiddle。

Answer 1

我认为仅使用 css 是不可能的。所以这是一个可能的 javascript 解决方案(也许您需要调整一些东西以使 px 完美居中......):

const tooltips = Array.from(document.querySelectorAll('.tooltip'));

function displayTooltip(e) {
  let tooltip = e.target;
  let title = tooltip.getAttribute('data-title');
  
  let tooltiptext = document.getElementById('tooltiptext');
  let rect = tooltip.getBoundingClientRect();
  let tooltipMargin = 14;
  
  tooltiptext.innerHTML = title;
  tooltiptext.style.top = rect.y + 'px';
  tooltiptext.style.left = rect.x + rect.width + tooltipMargin + 'px';
  tooltiptext.style.display = 'block';  
}

function hideTooltip() {
  let tooltiptext = document.getElementById('tooltiptext');
  tooltiptext.style.display = 'none';
}

tooltips.forEach(function(t) {
  t.addEventListener('mouseover', displayTooltip);
  t.addEventListener('mouseout', hideTooltip);
});

.content {
  height: 400px;
}

.LeftMenu {
  width: 200px;
  background-color: white;
  box-shadow: 1px 0 0 0 #ebedf8, -6px 0 30px 0 rgba(42, 34, 64, 0.1);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 25px;
  position: fixed;
  height: 100px;
  z-index: 100;
  overflow-x: hidden;
  overflow-y: auto;
}

/*overflow-x and overflow-y isn't working as expected*/

/*overflow-x must be visible since I need the tooltip to be visible*/

/*overflow-y must be auto since I need to have a fixed height div and content must be scrollable if it doesnt't fit inside the fixed height*/

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltiptext {
  position: absolute;
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1000;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

<div class='tooltiptext' id='tooltiptext'>

</div>
<div class="LeftMenu">
  <div class="tooltip" data-title="Tooltip text">
    Hover over me
  </div>
  
  <div class="tooltip" data-title="Tooltip text 2">
    Hover over me 2
  </div>  
  
  <div class="tooltip" data-title="Tooltip text 3">
    Hover over me 3
  </div>  
  
  <div class="tooltip" data-title="Tooltip text 4">
    Hover over me 4
  </div>  
  
  <div class="tooltip" data-title="Tooltip text 5">
    Hover over me 5
  </div>  
  
  <div class="tooltip" data-title="Tooltip text 6">
    Hover over me 6
  </div>  
  
  <div class="tooltip" data-title="Tooltip text 7">
    Hover over me 7
  </div>  
  
  <div class="tooltip" data-title="Tooltip text 8">
    Hover over me 8
  </div>    
</div>

和一个jsfiddle