如何将下拉菜单Div与Tooltip提示框结合实现？

问题概述 #

尝试用HTML5、CSS3和ES6实现点击展开/收起的下拉菜单，同时给输入框添加hover触发的Tooltip提示，但结合后出现两类问题：

• .ToolTip容器直接显示，无平滑下拉过渡
• .ToolTipText不显示，且.ToolTip出现怪异的中间展开/收起过渡
  已尝试调整CSS的visibility、z-index属性及JavaScript DOM样式，未解决。

问题代码 #

<h3 class="ShowHide">Text to click and display/hide</h3>
<div class="ToolTip">
    <div class="ToolTipText">Descriptive Text</div>
    <div>
        <label for="date">SaveDate:</label>
        <input type="text" id="date" name="date" required minlength="17" maxlength="17" />
    </div>
</div>
</div>

单独功能实现代码 #

下拉菜单功能 #

JavaScript

let ShHi = document.getElementsByClassName("ShowHide1")
for (let i = 0; i < ShHi.length; i++) {
  ShHi[i].addEventListener("click", function () {
    this.classList.toggle("show")
    let nextEl = this.nextElementSibling
    nextEl.classList.toggle("active")
    if (nextEl.style.maxHeight) {
      nextEl.style.maxHeight = null
    } else {
      nextEl.style.maxHeight = nextEl.scrollHeight + "px"
    }
  })
}

CSS

/* DropDown Part */
.ShowHide1 {
  padding: 0;
  font-size: 1em;
  transition: 0.3s;
  cursor: pointer;
}

.ToolTip1 {
  padding: 0 18px;
  margin: 3px 0;
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease-out;
}

Tooltip提示功能 #

CSS

/* ToolTip Part */
.ToolTip2 {
  position: relative;
  display: inline-block;
}

.ToolTip2 > :nth-child(2) {
  background-color: lightgreen;
  padding: 10px;
}

.ToolTip2 .ToolTipText2 {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  position: absolute;
  z-index: 1;
  transform: translateY(calc(-5px - 100%));
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

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

.ToolTip2:hover .ToolTipText2 {
  opacity: 1;
}

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
    <h2>DropDown Part</h2>
        <h3 class="ShowHide1"><u>Click Me!</u></h3>
        <div class="ToolTip1">
      <div>
        <label for="x">Some randomtext</label>
              <input id="x" name="x"/>
      </div>
        </div>
    <hr>
    <h2>ToolTip Part</h2>
        <h3>No Need to Click Me!</h3>
        <div class="ToolTip2">
      <div class="ToolTipText2">
        Text to display
      </div>
      <div>
              <label for="x1">Hover over this green area</label>
              <input id="x1" name="x1"/>
      </div>
        </div>
    </body>
</html>

解决方案 #

问题核心是两个功能的CSS属性冲突：下拉菜单用max-height:0+overflow:hidden控制显示隐藏，而Tooltip的position:absolute会脱离文档流，导致下拉容器的scrollHeight计算错误，同时overflow:hidden会截断绝对定位的Tooltip。

修正后的完整代码 #

HTML

<h3 class="ShowHide">点击展开/收起</h3>
<div class="dropdown-container">
    <div class="tooltip-wrapper">
        <div class="tooltip-text">输入需为17位字符</div>
        <div class="input-group">
            <label for="date">保存日期:</label>
            <input type="text" id="date" name="date" required minlength="17" maxlength="17" />
        </div>
    </div>
</div>

CSS

/* 下拉菜单核心样式 */
.ShowHide {
  padding: 0;
  font-size: 1em;
  cursor: pointer;
  text-decoration: underline;
}

.dropdown-container {
  padding: 0 18px;
  margin: 3px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

/* Tooltip核心样式 */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.input-group {
  background-color: lightgreen;
  padding: 10px;
}

.tooltip-text {
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 999; /* 确保Tooltip在最上层 */
  transform: translateY(calc(-5px - 100%));
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 防止Tooltip干扰交互 */
}

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

.tooltip-wrapper:hover .tooltip-text {
  opacity: 1;
}

JavaScript

const toggleButtons = document.getElementsByClassName("ShowHide");
for (let btn of toggleButtons) {
  btn.addEventListener("click", function() {
    const dropdown = this.nextElementSibling;
    // 计算高度时只取输入框容器的高度，忽略绝对定位的Tooltip
    const contentHeight = dropdown.querySelector(".input-group").scrollHeight;
    dropdown.style.maxHeight = dropdown.style.maxHeight ? null : `${contentHeight}px`;
  });
}

关键修正点 #

1. 结构分离：将下拉容器和Tooltip容器拆分，避免overflow:hidden截断Tooltip
2. 高度计算修正：JS计算下拉高度时，只取输入框所在容器的scrollHeight，忽略不占文档流的Tooltip
3. Tooltip层级优化：给Tooltip设置足够高的z-index，同时添加pointer-events:none避免干扰交互
4. 类名语义化：避免功能类名冲突，用更清晰的命名区分下拉和Tooltip组件

内容的提问来源于stack exchange，提问作者Apryed