poppers on SVG elements about vue3-popper HOT 4 OPEN

Is there an easy solution to make vue3-popper work with SVG ?

Unfortunately for your case, I don't think so since Popper is currently unable to be "renderless" as in not rendering any element except the one that it wraps. I don't know if that's even possible.

SVGs can have HTML in them using <foreignObject/> according to Google 😄 but I don't know anything more about that.

Thanks for the reproduction, I cloned your repo and it's an interesting problem, I just don't see the solution at the moment.

from vue3-popper.

@valgeirb thanks for the quick reply!

We have used foreignObject but as far as I can tell it requires to fix position and size, which is complicated here. The best would be to place the additional HTML elements outside the SVG.

Do you think it would be feasible to create a <PopperDetached> component to be used like this:

<template>
  <PopperDetached
    v-for="(d, name) in districts"
    :key="name"
    :hover="true"
    :trigger="name">
    <template #content>
      ...
    </template>
  </PopperDetached>
  <svg
    ...
  >
    <g>
      <path
        v-for="(d, name) in districts"
        :key="name"
        :id="name"
        ...
      />
    </g>
  </svg>
</template>

(based on the non-working code here: https://gitlab.com/simevo/vue3-svg-map/-/blob/vue3-popper/src/components/MapMaharashtra.vue)

Notice the trigger prop which is used to pass the id of the SVG element that actually triggers the popper.

from vue3-popper.

I have a similar use case that I'd love an implementation for. Any update here? The PopperDetached option @simevo mentions would work fine for us too.

from vue3-popper.

Had a similar issue, and solved it using foreignObject (to allow nested HTML in the svg) and Teleport (to move the tooltip to a place in the DOM outside the svg.

from vue3-popper.