Fix for #4153

[maxi4329]

Fixes #4153

The issue was caused by the mouseover event sometimes being triggered on button release for touch inputs. This resulted in the tooltip appearing but never closing.

I resolved the issue by only adding the mouseover and mouseout events on devices without touchscreens,
while the touchstart and touchend events are loaded for devices with touchscreens.

[softhack007]

Thanks for your contribution 👍

To make it easier for us poor reviewers, could you undo all formatting corrections (i.e. indentation changes)?
It will help us to see the real differences more clearly.

[w00000dy]

This will cause problems on laptops with a touch screen. You won't be able to see the tooltip when you move the mouse over the button.

Maybe do something like this:

var isTouchDevice = false;

window.addEventListener('touchstart', () => {
  isTouchDevice = true;
}, { once: true });

window.addEventListener('mousemove', () => {
  isTouchDevice = false;
}, { once: true });

[maxi4329]

Good point, but your solution doesn't work since the event listeners for touchstart, touchend, mouseover, and mouseout need to be removed/added.
I will get back to it when I have a little more time.

[maxi4329]

And you have to consider that on laptops with touchscreens, you can switch between mouse and touch.

[w00000dy]

My code snippet was only intended to replace your isTouchDevice calculation.
Your add/remove event listener should still be where you put it.

[w00000dy]

And you have to consider that on laptops with touchscreens, you can switch between mouse and touch.

I think this would not be a problem since touch input on a laptop with a touchscreen is interpreted as mouse input.

[maxi4329]

My code snippet was only intended to replace your isTouchDevice calculation. Your add/remove event listener should still be where you put it.

Let me clarify what I mean:
by the time if (isTouchDevice) ... is executed, it is very unlikely that the touchstart event has already been triggered.
As a result, only the mouse event listeners will be added, which in practice will lead to the same issue as before.

Here is how I implemented your code snippet:

function tooltip(cont = null) {
	var isTouchDevice = false;

	window.addEventListener('touchstart', () => {
	  isTouchDevice = true;
	}, { once: true });
	
	window.addEventListener('mousemove', () => {
	  isTouchDevice = false;
	}, { once: true });

	d.querySelectorAll((cont ? cont + " " : "") + "[title]").forEach((element) => {
		// isTouchDevice is pretty much always false here (except the user somehow manages to trigger the tochstart event in that short time period)
		
		if (isTouchDevice) {
			element.addEventListener("touchstart", () => { showTooltip(element); });
			element.addEventListener("touchend", () => { hideTooltip(element); });
		} else {
			element.addEventListener("mouseover", () => { showTooltip(element); });
			element.addEventListener("mouseout", () => { hideTooltip(element); });
		}
	});
};

[w00000dy]

I was thinking of something like this:

var isTouchDevice = false;

window.addEventListener('touchstart', () => {
  isTouchDevice = true;
}, { once: true });

window.addEventListener('mousemove', () => {
  isTouchDevice = false;
}, { once: true });


...


function tooltip(cont = null) {
	d.querySelectorAll((cont ? cont + " " : "") + "[title]").forEach((element) => {
		if (isTouchDevice) {
			element.addEventListener("touchstart", () => { showTooltip(element); });
			element.addEventListener("touchend", () => { hideTooltip(element); });
		} else {
			element.addEventListener("mouseover", () => { showTooltip(element); });
			element.addEventListener("mouseout", () => { hideTooltip(element); });
		}
	});
};

[maxi4329]

The tooltip function is called on page load, therefore this doesn't make a huge difference
After a bit of testing I found out that the mousemove event has the problem as mouseover and gets triggert an touch devices

[w00000dy]

What do you mean with touch devices? Devices with only a touchscreen or Laptops with touchscreen?

[maxi4329]

devices with only a touch screen

[w00000dy]

Same here

[DedeHai]

@w00000dy @maxi4329 what is the status on this PR?

[maxi4329]

I took another lock at it i think this is a good solution

[w00000dy]

Very good idea to use the pointer(over/out) event! 👏🏼 I wonder why I did not come up with this idea. Seems like a good and simple solution.

However, I did find a way to reproduce the behavior of #4153 on a laptop with a touchscreen 😆:

1. Click and hold the update segment button with your mouse
2. While holding down the left mouse button, click with your finger anywhere else on the touchscreen
3. Release the mouse button

To be honest, I have no idea why the pointerout event is not triggered in this case. 🤔

But since this is such a rare edge case, I would still approve this PR.