Hide hover popups for some props

[dabreegster]

I have something like this:

<Popup openOn="hover" let:features>
  {#if features[0].properties.foo}
    <p>Something based on these properties</p>
  {/if}
</Popup>

When I hover over a feature without that property, I of course get an empty popup:

What approaches are there to not show the popup, based on the feature being hovered on? Digging into the code, I think the answer will probably be to set openOn="manual" and then replicate some of the hover behavior manually:

  $: hoveringOnLayer =
    openOn === 'hover' && ($layerEvent?.type === 'mousemove' || $layerEvent?.type === 'mouseenter');
  $: if (openOn === 'hover' && layerEvent) {
    if (hoveringOnLayer && $layerEvent) {
      handleLayerEvent($layerEvent);
    }
    open = (hoveringOnLayer || hoveringOnPopup) ?? false;
  }

Just curious if anyone's done anything like this before and has anything to share. Thanks!

[dimfeld]

This feels like something that would be best done with an extra prop on the popup component. Something like

<Popup canOpen={(features) => !!features[0]?.properties?.description}>

[dabreegster]

Thank you, this is indeed the perfect API. I've implemented it for hover cases on the svelte 4 branch here for my own immediate-term use. I've got something started against the main branch too, but I'm unfortunately hitting problems upgrading my active projects to Svelte 5. I'll send a PR when I get some time to polish the one against main.

[dimfeld]

Glad to hear it! I threw together a similar implementation for the new Svelte 5 version at #246. Will test and merge it this week or next.

[dimfeld]

canOpen is now available in 1.0.0-next.13