Невозможно установить 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;
}

В левом меню есть много детей. При наведении на каждый дочерний элемент отображается подсказка. Вертикальная прокрутка должна отображаться, если длина дочернего элемента 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