Javascript to show Tooltip

[dcapslock]

Perhaps you want to have a button where on tap you want to show the tooltip as a feedback. While controlling the tooltip manually is NOT supported, javascript is at your hands to try out what you can do.

Below sets tooltip activation to manual and then shows tooltip on button click, then hide after 5s.

type: custom:button-card
variables:
  zBootstrap: |
    [[[
      this.updateComplete.then(()=>{ this.shadowRoot.querySelector("#tooltip").trigger = "manual" })
    ]]]
entity: light.bed_light
section_mode: true
tooltip: Test 1 2 3
grid_options:
  rows: 2
  columns: 6
tap_action:
  action: javascript
  javascript: |
    [[[
      this.shadowRoot.querySelector("#tooltip")?.show()
        .then(window.setTimeout(()=>this.shadowRoot.querySelector("#tooltip")?.hide(), 5000))
    ]]]

[GGSSDD]

Copied from #1078

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 });
        }
      });
    ]]]