基于jQuery实现Tooltip悬停持久可见性的问题求助

你遇到的问题本质是hover事件只绑定在了触发元素#icon上——当鼠标离开#icon时，不管有没有移到tooltip上，都会立刻触发fadeOut。下面给你两种实用的解决思路：

方案一：利用父容器绑定Hover事件（最简单） #

因为你的#tooltip是#credit的子元素，我们可以把hover事件直接绑定在父容器#credit上。这样只要鼠标在#credit范围内（包括#icon和#tooltip），tooltip就会保持显示，只有当鼠标完全离开#credit时才会消失。

修改后的JavaScript代码：

$('#credit').hover(
  function() { $('#tooltip').fadeIn(); },
  function() { $('#tooltip').fadeOut(); }
);

当前的CSS无需修改，#tooltip是绝对定位，不会影响父容器#credit的范围判断，鼠标移到tooltip上时依然会被识别为在#credit的hover范围内，逻辑完全成立。

方案二：延迟隐藏+Tooltip独立事件监听（更灵活） #

如果你的tooltip和触发元素不是父子关系，或者需要更精细的交互控制，可以用延迟隐藏的方式：当鼠标离开#icon时，先设置一个定时器延迟执行隐藏；如果在延迟时间内鼠标移到了tooltip上，就取消这个定时器；当鼠标离开tooltip时，再触发隐藏。

修改后的JavaScript代码：

let tooltipTimer;

// 触发元素的hover事件
$('#icon').hover(
  function() {
    clearTimeout(tooltipTimer); // 清除之前的延迟定时器
    $('#tooltip').fadeIn();
  },
  function() {
    // 设置500毫秒延迟隐藏，可根据需求调整时长
    tooltipTimer = setTimeout(() => {
      $('#tooltip').fadeOut();
    }, 500);
  }
);

// Tooltip自身的鼠标事件
$('#tooltip').hover(
  function() {
    clearTimeout(tooltipTimer); // 鼠标移进来，取消隐藏定时器
  },
  function() {
    $('#tooltip').fadeOut(); // 鼠标移出去，直接隐藏
  }
);

这个方案兼容性更强，哪怕tooltip和触发元素没有嵌套关系也能正常工作，延迟时长可以根据交互需求调整（比如300毫秒会更灵敏）。

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