JSFiddle - React, Tailwind, and code Playground

HTML

<span class="wrapper">
  <a target="_blank" href="https://www.google.com/">Google</a>
  <div class="tooltip">
    Tooltip
  </div>
</span>

CSS

.wrapper {
  position: relative;
}

.wrapper:hover:not(:focus-within) .tooltip {
  transition: opacity 0.5s step-end;
  opacity: 1;
}

.tooltip {
  position: absolute;
  height: 20px;
  background-color: black;
  opacity: 0;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0;
}

JavaScript

const onMouseEnter = () => {
	document.querySelector('a').blur()
}

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
  	document.addEventListener('mouseenter', () => {
      onMouseEnter()
      document.removeEventListener('mouseenter', onMouseEnter)
    })
  }
});