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.

[Andro-Marian]

This still occurs for me on 0.16 alpha for some reason.

[w00000dy]

@Andro-Marian Which exact version have you tried? Since this PR hasn't been merged yet, you can test it here: https://github.com/maxi4329/WLED/tree/bugfix

[Andro-Marian]

@Andro-Marian Which exact version have you tried? Since this PR hasn't been merged yet, you can test it here: https://github.com/maxi4329/WLED/tree/bugfix

Nightly Release 20250209 - It says it has the fix. Or is not the good one?

[w00000dy]

@Andro-Marian The fix is not in this release. The changelog says it because the issue has been closed, but this PR has not been merged yet. Binaries containing the fix can be found here:
https://github.com/maxi4329/WLED/actions/runs/12875375188

[DedeHai]

@w00000dy is there anything that speaks agains merging this (apart from the edge case you found)?

[w00000dy]

@DedeHai I don't see any reason not to merge this.

[Andro-Marian]

I try it now. Now on windows when you move the mouse over it, the label flickers.

Why not removing it completly?

[w00000dy]

The flickering is another bug. This bug was there before.

[Andro-Marian]

Other thing I noticed is why the attribute Title is removed and setting another attribute data-title.
Sometimes show null as tooltip.

And it's still duplicate when clicking on it.

[maxi4329]

Other thing I noticed is why the attribute Title is removed and setting another attribute data-title

this is to prevent the default tooltip from appearing

Sometimes show null as tooltip.

I cant reproduce that could you find a way to reproduce

And it's still duplicate when clicking on it.

do you updated to https://github.com/maxi4329/WLED/actions/runs/12875375188 (it should say v0.15.0-b7 instead of v0.16.0-alpha) and cleared the browsers cache?

[Andro-Marian]

Yea. Fixed the flicker by this:

.btn-icon {
  pointer-events: none;
}

[maxi4329]

Yea. Fixed the flicker by this:

.btn-icon {
  pointer-events: none;
}

@Andro-Marian could you open a new pr for this?