HTML鼠标悬停提示元素留白与换行错位问题求解决方案

问题分析 #

1. 文字下方存在留白：原CSS存在语法错误（.tooltip:hover .tooltiptext内嵌套无效选择器），且部分元素line-height设置不合理，导致额外空白。
2. 第三行内容时图标被挤到文字下方：HTML中在<span>内嵌套块级元素<div>，破坏行内布局，引发换行时元素错位。

修改方案 #

修复后的CSS代码 #

label {
  display: inline-block;
  width: 84px;
}

span#typePrompt {
  display: block;
  line-height: 1;
}

.tooltip {
  position: relative;
  display: inline; /* 改为行内元素，确保与文字同行布局 */
  border-bottom: 1px dotted black;
  vertical-align: middle; /* 对齐图标与文字，消除下方留白 */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -100px; /* 修正居中偏移，适配200px宽度 */
}

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

.tooltip:hover .tooltiptext {
  visibility: visible;
}

修复后的HTML代码 #

<td style="width: 253.55pt; border-top: none; border-left: none; border-bottom: 1pt solid #c9c9c9; border-right: 1pt solid #c9c9c9; background: #ededed; padding: 0cm 5.4pt; height: 16.7pt; vertical-align: top;">
  <p style="line-height: normal; font-size: 15px; font-family: 'Calibri',sans-serif; margin: 0cm;">
    <strong><span style="font-size: 19px; color: black;">
      <span>Max Reach   </span>
      <span class="tooltip"> <!-- 将div改为span，行内元素不破坏布局 -->
        <span>Ⓘ</span>
        <span class="tooltiptext">Maximum cable distance for SR modules is 2m</span>
      </span>
    </span></strong>
  </p>
</td>

关键修改点说明 #

• 修复CSS语法错误：移除.tooltip:hover .tooltiptext内无效的嵌套选择器，避免样式解析异常。
• 优化行内布局：将.tooltip设为inline显示，添加vertical-align: middle实现图标与文字垂直对齐，消除下方留白。
• 修正HTML结构：把包裹图标的<div>替换为<span>，利用行内元素特性，解决内容换行时图标被挤到下方的问题。
• 调整提示框居中：修改margin-left为-100px，让200px宽的提示框精准居中于图标下方。

内容的提问来源于stack exchange，提问作者SamC-WT