Tooltip 异常显示? 别慌，3步帮你轻松修复！

前端

2023-12-10 22:52:23

前端开发中的 Bug 定位与修复指南：提示框显示异常案例解析

在前端开发的浩瀚世界中，我们时常会与各种各样的 bug 殊死较量，它们潜伏在代码的幽暗角落，伺机破坏我们的辛勤成果。其中，提示框的异常显示就是一个令人头痛的问题，它不仅影响用户体验，更会阻碍项目的顺利上线。

背景：

我曾经在一个项目中遭遇了一个棘手的提示框显示异常 bug。在开发阶段，一切看似正常，但在项目上线后，用户反馈接踵而至，报告提示框在特定情况下会同时显示多个，扰乱了操作界面。

分析：

接到用户的反馈后，我立刻投入到问题分析之中。通过细致观察，我发现当左侧菜单栏收起时，点击菜单项就会触发多个提示框同时出现。这让我联想到，菜单栏收起后，菜单项的位置可能发生了变化，而提示框库未能及时更新其位置信息。

定位：

为了验证我的猜测，我打开了浏览器的开发者工具，并在控制台中输入了以下代码：

console.log($('.tooltip').length);

结果显示，当左侧菜单栏收起时，提示框的数量确实会增加。这进一步证实了我的推断，提示框位置计算出现了问题。

修复：

明确了问题根源后，我着手进行修复。我修改了提示框库的代码，使其能够在菜单栏收起后及时更新提示框的位置。具体来说，我添加了以下代码：

$(window).on('resize', function() {
  $('.tooltip').each(function() {
    var tooltip = $(this);
    var target = tooltip.data('target');
    var offset = target.offset();
    tooltip.css({
      left: offset.left + target.width() / 2 - tooltip.width() / 2,
      top: offset.top + target.height() + 10
    });
  });
});