自定义Tooltip高度异常问题：原因排查与自动适配解决求助

我来帮你分析问题根源并给出修复方案，你的代码里有几个细节问题导致了Tooltip出现多余高度：

问题原因 #

1. 定位属性冲突：你的.tooltip CSS里同时设置了bottom: -25px和JS中的top: topPos + 20。对于绝对定位元素来说，同时定义top和bottom会让浏览器自动拉伸元素高度来填满两个值之间的空间，这就是多余高度的直接来源。
2. 变量作用域漏洞：你在each循环里定义的title变量，在mouseover回调中会被最后一次循环的值覆盖——不信你测试下Test2和Test3，它们的tooltip会显示同一个标题。
3. DOM操作时机问题：插入Tooltip后立即调用fadeIn()，此时元素可能还没完成渲染，样式计算容易出现延迟或异常。

修复方案 #

1. 修正CSS定位规则 #

移除.tooltip中的bottom: -25px，只保留JS控制的top定位，让Tooltip完全根据内容自动适配高度：

.tooltip {
  position: absolute;
  background: #303030;
  font-size: 10px!important;
  /* 移除bottom属性，避免定位冲突 */
  color: white;
  padding: 3px 5px;
  white-space: nowrap;
  border-radius: 0 8px 8px;
  z-index: 999;
  display: none; /* 初始隐藏，避免插入时的闪烁 */
}

2. 修复JS逻辑与作用域问题 #

重写JS代码，用$(this).data('title')获取当前元素的标题，同时简化Tooltip的创建逻辑：

$('a').each(function() {
  const $this = $(this);
  const title = $this.attr('title');
  if (title) {
    $this.data('title', title).removeAttr('title');
    
    $this.mouseover(function() {
      // 先移除已存在的tooltip，避免重复创建
      $('.tooltip').remove();
      // 获取当前元素的定位坐标
      const leftPos = $this.offset().left;
      const topPos = $this.offset().top;
      // 创建tooltip并设置样式后再显示
      $('<span class="tooltip">' + $this.data('title') + '</span>')
        .appendTo('body')
        .css({
          top: topPos + 20,
          left: leftPos + 20
        })
        .fadeIn();
    });
    
    $this.mouseleave(function() {
      $('.tooltip').fadeOut(function() {
        // 动画结束后移除元素，减少DOM残留
        $(this).remove();
      });
    });
  }
});

3. 额外优化说明 #

• 给.tooltip添加display: none初始隐藏，避免插入时的瞬间闪烁。
• 在mouseleave的fadeOut回调中移除Tooltip，防止DOM中堆积无用元素。
• 用$this缓存当前jQuery对象，减少重复DOM查询，提升性能。

现在你的Tooltip会根据内容自动适配宽高，不会再出现多余高度，同时每个链接的标题也能正确显示了。

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