CSS如何实现:hover触发的tooltip提示框延迟隐藏效果

我参考公开方案实现HTML tooltip脚注提示效果，针对原方案尺寸适配不佳的问题做了定制调整，当前可正常运行的实现代码如下：

现有代码 #

样式代码 #

sup.footnote::after {
  content: attr(data-count);
}
sup.footnote:hover {
  cursor: help;
  position: relative;
}
sup.footnote cite {
  display: none;
}
sup.footnote:hover cite {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -50%;
  width: 250px;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
  overflow: hidden;
}
sup.footnote cite a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

结构代码 #

<p> another line </p>
<p>
  Dies ist ein Beispiel für eine Fußnote in HTML
  <sup class="footnote" data-count="1">
    <cite>
      <span> [Sample span]</span>&nbsp;with some explanation:
      <a lang="en" href="http://test.gv.at/test.pdf">
        http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
      </a>
    </cite>
  </sup>
</p>
<p> another line </p>

存在的问题 #

该方案整体运行效果基本符合预期，但存在交互缺陷：

• 受鼠标光标进入方向影响，弹出的提示框与触发元素的重叠区域不足，当用户尝试将光标移动到弹出的提示框内部时，提示框会在光标抵达前就消失
• 演示环境中该问题表现不明显（从左上角方向移入提示区域即可复现），但实际使用场景下这套隐藏逻辑的体验极差

我曾尝试过多种基于opacity属性的解决方案，其中一套方案思路可行性很高，但始终无法与现有代码顺利适配，推测问题根源是当前代码使用display: none属性控制元素显隐，无法支持过渡类的延迟效果。

需求：编写对应的CSS代码，实现提示框的延迟隐藏效果，解决光标移入提示框过程中提示框提前消失的问题。

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