如何实现大型Tooltip仅在鼠标悬停触发文本时显示？

问题根源在于你在hover状态下给tooltip设置了pointer-events: auto，导致鼠标移到tooltip自身上时，.tooltip的hover状态会持续触发，tooltip不会消失，进而遮挡下方的列表项。

只需修改CSS代码，移除hover状态下的pointer-events: auto即可：

.tooltip {
  border-bottom: 2px dotted black;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  width: max-content;
  background-color: rgba(30, 30, 30, 0.8);
  color: #fff;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  border-radius: 6px;
  font-weight: semi-bold;
  padding: 5px 5px 5px 8px;
  transition: opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 始终保持不接收鼠标事件 */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  /* 移除pointer-events: auto */
  opacity: 1;
  visibility: visible;
}

修改后，tooltip永远不会响应鼠标事件，只有当鼠标真正悬停在.tooltip的文本（比如"Apples"）上时，tooltip才会显示。当鼠标移到tooltip区域或者下方的"Bananas"上时，Apples的tooltip会立刻消失，不会再出现遮挡问题。

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