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