All tooltips that were previously working are broken since updated polaris web component library updated

Polaris
1

At some point recently the distributed version of the polaris web components file seems to have broken all my previously-working tooltips. I think it might be the release mentioned in this topic on 22-01. I’ve noticed that the tooltip examples on the official docs have also stopped working. has anyone else noticed this or is it just me? tried in chromium based browser and in firefox.

2

Do you have an example? It seems to be working fine here. https://codepen.io/afrehner/pen/azZEEyO

3

well, it must be environmental. the codepen doesn’t work for me either. I added a hover effect and a system tooltip just to make sure the screen recording worked. ran it in firefox and edge. inprivate modes, not extensions. win 11

4

Hm, that’s interesting. I’m not entirely sure what’s going on there, and since it seems to be on your computer but not global, I don’t know how to reproduce/fix it. Hm.

5

OK, this used to work and has changed recently. and it’s my environment not browser quirk, extension or my app code. so my device. so here’s what I think. I’m on a surface pro. browser recognises that it’s touch enabled (even though It’s really a desktop, and in my case docked anyway) and reports navigator.maxTouchPoints: 10. I think because shopify have said that tooltips don’t show on mobile, that the sp pro is reporting that it’s touch enabled even though that’s not the whole story and maybe the capability code in polaris is rejecting it?

I’ve tried a standard vanilla popover codepen using the popoverapi as shopify do and that owrks fine.

6

Ah interesting, good find. Yeah I suspect the touch interface is causing that issue for you. :frowning:

7

It may well be because of the device but something else has changed either with the library or how the browser reports it because they’ve worked fine for months and just stopped…

Using this device for years building Shopify apps and relatively early adopter of web components…

I’ll keep looking I guess

8

for reference, there are either some changes in how polaris is doing capability checks or in how the surface pro returns answers to its match media queries. polaris checks window.matchMedia(“(pointer: fine)”).matches (still readable in the minified js) and the SP pro is returning false to that. I don’t know which changed, but if you monkey patch the windows matchMedia query you can see the tooltip come back.

so won’t be broken for my users, just me.

@Anthony_Frehner thanks for your responses. I don’t suppose it matters whether its microsoft or shopify who changed, but a changelog that we could look at as mentioned in other posts would certainly help as would version pinning.

Object.defineProperty(window, 'matchMedia', {
  value: (q) => ({
    matches: q.includes('pointer: fine') || q.includes('hover: hover'),
    media: q,
    onchange: null,
    addListener: () => {},
    removeListener: () => {},
    addEventListener: () => {},
    removeEventListener: () => {},
    dispatchEvent: () => false
  })
})

const el = document.querySelector("script#polaris")
el.src = "https://cdn.shopify.com/shopifycloud/polaris.js"

1 Like
9

seems unlikely that anyone else needs this, but here’s a developer experience / quality of life thing if you happen to be developing on a hybrid and can’t see any of your tooltips… the capability check is in js, so you can patch it in a useEffect in a dev component if you’re react router 7 and then just include it only in dev builds before your AppProvider

import { useEffect } from "react";

/**
 * This is a development only patch to override matchMedia to avoid issues
 * with Polaris tooltips not rendering on hybrid touch/desktop devices (such as
 * my surface pro!)
 * https://community.shopify.dev/t/all-tooltips-that-were-previously-working-are-broken-since-updated-polaris-web-component-library-updated/28898
 * @returns null
 */
export function DevMatchMediaPatch() {
  useEffect(() => {
    const realMatchMedia = window.matchMedia.bind(window);

    window.matchMedia = (query) => {
      if (query.includes("coarse")) {
        return {
          matches: false,
          media: query,
          onchange: null,
          addListener() {},
          removeListener() {},
          addEventListener() {},
          removeEventListener() {},
          dispatchEvent() {
            return false;
          },
        };
      }
      return realMatchMedia(query);
    };
  }, []);

  return null;
}

and then import into your dev build something like

export default function App() {
  const { apiKey } = useLoaderData();
  return (
    <>
      {process.env.NODE_ENV === "development" && <DevMatchMediaPatch />}
      <AppProvider embedded apiKey={apiKey}>
        <Outlet />
      </AppProvider>
    </>
  );
}
1 Like
10

Thanks for working through that and writing down what you found.

Internally we’re trying to move more towards not using tooltips at all, but obviously that’ll take time and some rethinking of designs, so who knows if we’ll ever get there. But not being able to interact well with them is one of the reasons.