隐藏大工具提示并保持可见，直到鼠标出现为止？

Question

我正在使用大型工具提示，该工具提示可扩展列表中的项目，提供每个项目的附加详细信息。当鼠标向上移动时，大工具提示效果很好，但当鼠标向下移动时，就会出现问题，因为当鼠标悬停在大工具提示上方时，大工具提示将保持可见。

下面的代码片段显示了这种效果。上下移动鼠标，您可以看到

Apples

工具提示抑制了

Bannanna

工具提示。

.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;
}

Item 1:
<div class="tooltip">
  <span class="tooltiptext">Apples<br>color: red<br>format: roundish</span> Apples
</div><br>
Item 2:
<div class="tooltip">
  <span class="tooltiptext">Bannanas<br>color: yellow<br>format: long</span> Bannanas
</div><br>

我希望仅当鼠标悬停在

Apples

单词上时，

Apples

工具提示才可见。我怎样才能做到这一点？没有 JavaScript 的解决方案会更好。

Answer 1

也许可以使用下一个兄弟

.tooltiptrigger:hover + .tooltiptext

以不同的方式选择工具提示，这样当鼠标悬停在工具提示上方时，工具提示将隐藏。 这个

.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;
}

.tooltiptrigger:hover + .tooltiptext {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

Item 1:
<div class="tooltip">
  <span class="tooltiptrigger">Apples</span><span class="tooltiptext">Apples<br>color: red<br>format: roundish</span> 
</div><br>
Item 2:
<div class="tooltip">
  <span class="tooltiptrigger">Bannanas</span><span class="tooltiptext">Bannanas<br>color: yellow<br>format: long</span> 
</div><br>