Tooltip trigger on touch screen devices

[GGSSDD]

Hi,
I’m really excited about the new tooltip feature. Works great on hover in a desktop browser, but what about touch screen devices? How do you trigger it? I’ve searched and there’s nothing related to this anywhere.
If I simply tap the card the more-info dialog pops up, if I disable the tap_action then the tooltip won’t trigger, not even on hover. I’ve tried setting “trigger” to ‘hover click’ as per documentation, but it doesn’t work either.
Can you advise, please? Thank you!

[RomRider]

Tooltip is not supported on touchscreen devices.

[GGSSDD]

Could this be possible at some point?

[RomRider]

Probably not.

But I'm really wondering what this would look like? There's no "hover" notion on a touchscreen so I'm puzzled.

[dcapslock]

@GGSSDD as per @RomRider, I am curious as to how you would generally trigger tooltips on mobile. The Material design (Google) discusses hold to trigger. But UI wise, if a user needs to guess to hold to see a tooltip, you might as well use something like a Toast to provide feedback.

Anyhow, if you are game you can try my non official JS method posted in discussions. #1079

[GGSSDD]

I guess it could be something similar to the Apexcharts tooltip, a press and release behaviour, activate on press - deactivate on release, just saying, don't even know if it's doable... as for needing to guess if there's something hidden there, like a tooltip I guess you could add an icon like "mdi:information-outline" or some symbol that tells you there's some hidden info there.

[dcapslock]

activate on press - deactivate on release

You can adjust the JS method I posted in discussions using press/release actions of button-card.

[GGSSDD]

I will try that, thank you!

[GGSSDD]

This is the most stable setup I could come up with. The entire logic is handled inside the variable because this produces the most stable results. Handling the logic within the press/release actions produced very unstable results on iOS touch screen devices. Couldn't pinpoint the exact reason why.

What it does:

• Checks if the device supports hover or not, and then assigns the proper behaviour for each device type (hover for hover capable devices and press/release for touchscreen devices)
• On touchscreen devices the tooltip is initiated on press and hides on release or when you move your finger outside the container, while still pressed.

type: custom:button-card
variables:
  zBootstrap: |
    [[[
      this.updateComplete.then(() => {
        const tooltip = this.shadowRoot?.querySelector("#tooltip");
        if (!tooltip) return;

        tooltip.trigger = "manual";

        const isHoverCapable = window.matchMedia("(hover: hover)").matches;

        const show = () => tooltip.show?.();
        const hide = () => tooltip.hide?.();

        const moveTouch = (e) => {
          const touch = e.touches?.[0];
          if (!touch) return;

          const rect = this.getBoundingClientRect();
          const inside =
            touch.clientX >= rect.left &&
            touch.clientX <= rect.right &&
            touch.clientY >= rect.top &&
            touch.clientY <= rect.bottom;

          if (!inside) {
            tooltip.hide?.();
          }
        };

        const moveMouse = (e) => {
          const rect = this.getBoundingClientRect();
          const inside =
            e.clientX >= rect.left &&
            e.clientX <= rect.right &&
            e.clientY >= rect.top &&
            e.clientY <= rect.bottom;

          if (!inside) {
            tooltip.hide?.();
          }
        };

        this.removeEventListener("mouseenter", show);
        this.removeEventListener("mouseleave", hide);
        this.removeEventListener("mousemove", moveMouse);
        this.removeEventListener("touchstart", show);
        this.removeEventListener("touchend", hide);
        this.removeEventListener("touchmove", moveTouch);
        this.removeEventListener("mousedown", show);
        this.removeEventListener("mouseup", hide);

        if (isHoverCapable) {
          this.addEventListener("mouseenter", show, { passive: true });
          this.addEventListener("mouseleave", hide, { passive: true });
          this.addEventListener("mousemove", moveMouse, { passive: true });
        } else {
          this.addEventListener("touchstart", show, { passive: true });
          this.addEventListener("touchend", hide, { passive: true });
          this.addEventListener("touchmove", moveTouch, { passive: true });
          this.addEventListener("mousedown", show, { passive: true });
          this.addEventListener("mouseup", hide, { passive: true });
        }
      });
    ]]]

[dcapslock]

Note. This will be incompatible which actions of course.

Suggest you copy that over to the discussion. Closing this now as tooltips are not officially supported on touch devices.

[GGSSDD]

I can't convert the issue to discussion. Any suggestions?

[dcapslock]

Just copy your improvement to my initial JS in the discussion I made :-)

[RomRider]

Would a custom action be useful here? So that you could do...

tap_action: # or any other
  action: tooltip
  tooltip:
    [options here, like hideAfter: xxx] 

WDYT @dcapslock?

[dcapslock]

Could be good, but reviewing what @GGSSDD has done I don’t know if it helps that use case.

[Mariusthvdb]

If I may, it did work before the new developments, so can we maybe check what happened ?

Mobile just showed the tooltip on touch

[RomRider]

TBH, it might have worked but it doesn't make sense from UX perspective.
It might make sense to have tooltip show on hold, but that's about it.

So we're going to keep it like this (and aligned with what HA offers) and I'll add a tooltip action so you'll be free to display a tooltip whenever you want for any action you want, including multi-action of course.