Mouseleave event bug with multiline title attribute

Question

While working on one of my project, I noticed that if the title attribute of any elements is in multiple lines, then the mouseleave event gets triggered when I hover over the title tooltip.

Is this a known issue? If yes, how do I fix it?

Below is an example showing the issue.

let count = 0;

function test(x) {
  //console.log(x.style.fontSize)
  count++
  document.getElementById("count").innerText = count;
}

#test {
  width: 100vw;
  height: 40vh;
  border: 1px solid;
}

<div>
  <p>MouseLeave Count:
    <span id="count">0</span>
  </p>
  <em> (hover inside box below, hold for tooltip, then hover over tooltip)</em>
  <p id="test" onmouseleave="test(this)" title="This is a 
multi line title"></p>
</div>

---

Note that, I see this behavior in

• Microsoft Edge Version 114.0.1823.43 (Official build) (64-bit)
• Chrome Version 112.0.5615.138 (Official Build) (64-bit)

Works fine in:

• Firefox 114.0.1 (64-bit)

Cordwood

the question is not about the tooltip getting hidden. It is about the mouseleave event getting triggered when I hover over the tooltip - even when the mouse is inside the boundaries of the element – Cordwood

Chrome as well (logically, chromium). Indeed. Your point is absolutely valid. That should not be happening at all! Browser tooltips should not interfere with pointer events. They should act by default as i.e: CSS's pointer-events: none; so to say. – Eudemonia

Oh, interesting. Can you add the details of your browser at the bottom of the question? It will help the community to know which browsers have this issue. I have listed my findings, please add to it – Cordwood

The current way i'm handling this is using a setTimeout in the mouseleave for 2 seconds and using clearInterval in the mouseenter event is the user comes back within 2 seconds – Cordwood