Hide big tooltip that keep visible untill the mouse lives it?

Question

I am using big tooltips that expand over items of a list providing additional details of each item. The big tooltips work well as the mouse moves up but as the mouse moves down there is an issue because the big tooltip will keep visible while the mouse is over it.

The snippet below shows that effect. Moving the mouse up and down you can see that the Apples tooltip supresses the Bannanna tooltip.

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

I would like the Apples tooltip to be visible only when the mouse is over the Apples word. How can I achieve that? A solution without JavaScript would be preferable.

Answer 1

You correctly set the pointer-events: none for the .tooltiptext-element but set it to auto again on hover. Since you don't want the mouse to trigger anything on the tooltip text itself, the property value should remain none on hover. This way the cursor triggers your desired effect only on hover of the actual tooltip trigger element.