在可滚动菜单栏上完全显示工具提示的解决方案

Question

我正在尝试制作一个下拉菜单栏，如果我将鼠标悬停在项目工具提示上，则会显示一些文本。

我得到了结果 A，我希望得到像 B 这样的结果，其中工具提示没有被下拉菜单覆盖一半。

我假设因为我的 span 元素位于锚元素内，所以它不可能从下拉菜单中弹出，或者可能 这是由于溢出属性，但我不确定如何修复或更改我的代码以实现 B，我也不想增加下拉菜单的宽度来实现这一点，也就是说我不'不希望工具提示文本受到下拉菜单的限制。

我有什么方向可以实现我的要求吗？？

代码如下：

HTML

<ul id='menu'>
<li>choose
    <ul>
      <li><a class="tooltip" href="">a<span class="tooltiptext">this is a</span></a></li>
      <li><a class="tooltip" href="">b<span class="tooltiptext">this is b</span></a></li>
      <li><a class="tooltip" href="">c<span class="tooltiptext">this is c</span></a></li>
      <li><a class="tooltip" href="">d<span class="tooltiptext">this is d</span></a></li>
    </ul>
</li>

CSS

#menu > li {
    display:inline-block;
    border:1px solid grey;
    position:relative;
}
#menu li ul {
    position:absolute;
    border:1px solid grey;
    list-style-type: none;
    max-height:0;
    overflow:hidden;
}
#menu li:hover ul {
    overflow-y:scroll;
    overflow-x:hidden;
    max-height:150px;
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Answer 1

如果您使用 Javascript，将会观察到最佳结果。我在 CodeSandbox (https://codesandbox.io/s/nn96zl4jl) 中编写了一个简短的示例。

将包含的<ul> 元素设置为position: absolute，在此元素之外有工具提示<div> 元素，最初是display: none，编写可以通过模式连接的元素id（例如元素id 'number1'，工具提示id 'number1tooltip', 2...3...4 等），连接可以获取悬停目标（'mouseenter'，'mouseleave'）事件的事件侦听器，从悬停目标中找到工具提示（连接'tooltip'带 id)，设置 display: inline 并使用 getBoundingClientRect() 找出如何绝对定位它（参见 CodeSandbox 方法）。

GL。

Answer 2

只需对 CSS 做一点改动

  #menu li:hover ul{
  overflow: visible;
  max-height:150px;
}

如上所示，您的问题是由于溢出值引起的。这是我的jsfiddle。以下是关于溢出值w3school、MDN 的小文档。