Whenever I hover over an SVG rectangle, my tooltip starts flickering erratically. The display switches between "none" and "flex" unpredictably.
Interestingly, when I tested the same code with a div element instead of a rectangle, the result was much smoother. It appears to be something specific to the rect element causing this issue.
In the snippet below, I noticed that the behavior is slightly different compared to when I view it in Chrome. In the snippet, it works fine when entering the rect from left to right or top to bottom, but not the other way around. However, in Chrome, it just keeps flickering regardless of the entry direction.
I'm curious about why it's acting this way and what steps I can take to address it?
const tooltips = document.querySelectorAll('.tooltip');
const bars = document.querySelectorAll('rect');
document.addEventListener('mousemove', fn);
function fn(e) {
tooltips[0].style.left = e.pageX + 'px';
tooltips[0].style.top = e.pageY + 'px';
}
bars[0].onmouseenter = () => {
tooltips[0].style.display = 'flex';
}
bars[0].onmouseleave = () => {
tooltips[0].style.display = 'none';
}.tooltip {
display: none;
position: absolute;
background-color: grey;
}<div class="tooltip">
<p>Rect 1</p>
</div>
<svg width="500" height="500">
<rect width="200" height="30" x="0" y="0" style="fill:rgb(0,0,255)" />
</svg>