如何修复点击切换内容时动态高度tooltip意外消失的问题

问题说明 #

悬浮在触发区域时会弹出tooltip，tooltip内置折叠/展开列表功能，点击View Less折叠内容时，tooltip高度缩小导致鼠标脱离tooltip区域，触发hover移出事件直接隐藏tooltip，导致折叠功能无法正常使用，且UX要求不能将View More按钮放在tooltip顶部。

修复方案 #

核心思路是给tooltip的隐藏逻辑加短延时防抖，规避高度收缩时的误触发问题，无需修改原有UI布局，完全保留悬浮交互逻辑。

修改后的JS代码 #

原有CSS和HTML代码无需修改，直接替换JS逻辑即可：

// 新增隐藏定时器变量
let hideTimer = null;
let isShow = false;

$(".title").hover(
  (e) => {
    // 移入时清除待执行的隐藏任务
    clearTimeout(hideTimer);
    $(".tooltip").show();
  },
  (e) => {
    // 移出时加250ms延时再执行隐藏，覆盖高度收缩的间隙
    hideTimer = setTimeout(() => {
      $(".tooltip").hide();
    }, 250);
  }
);

$(".tooltip").hover(
  (e) => {
    // 移入tooltip时同样清除隐藏任务
    clearTimeout(hideTimer);
    $(".tooltip").show();
  },
  (e) => {
    hideTimer = setTimeout(() => {
      $(".tooltip").hide();
    }, 250);
  }
);

$("#view_toggle").on("click", (e) => {
  if (isShow) {
    $(".li_hide").hide();
    $("ul li:last").text("View More");
  } else {
    $(".li_hide").show();
    $("ul li:last").text("View Less");
  }
  isShow = !isShow;
});

方案说明 #

• 250ms的延时极短，用户感知不到延迟，完全不影响正常悬浮移出的隐藏体验
• 只要用户鼠标在延时范围内回到tooltip区域，就会清除隐藏定时器，不会出现误隐藏
• 无需调整任何CSS和HTML结构，符合UX设计要求
• 实现成本低，逻辑简单易维护

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