Question: Dynamically set targets or attach popper a different place in the DOM

[fredrik-sogaard]

I have a SVG with many paths were I want to show a popover on hover over each path. The problem is that the popper gets attached inside the SVG, and normal html elements won't render inside a SVG.

Is there a way to

1. dynamically set a target so I can place one popper independently of the targets, and just updating the target on hover?
   or
2. attach all the poppers somewhere else in the DOM so they won't end up inside the SVG?

Sorry for asking simple questions here, but I've tried to figure this out and failed.

[FezVrasta]

<Manager>
  <svg>
    <Target>
      <rect />
    </Target>
  </svg>
  <Popper />
</Manager>

Can it work for you?

[fredrik-sogaard]

I don’t think so, because I have many targets inside the same SVG. Any ideas on how to make it work?

[FezVrasta]

Then you can use React portals to move the popper outside the svg

[fredrik-sogaard]

Ah, thanks! I'll look into that.