Positioning a popover relative to a set of coordinates

[brianchhun]

Can the Popover component be positioned on a page relative to a set of coordinates (say from a user's selection) rather than an element on the page? It looks like Popper.js supports this use case by passing a non-DOM node reference object into its constructor: https://popper.js.org/popper-documentation.html#referenceObject

[jnsprnw]

I’m not totally sure if my question would be solved by this as well but I’m looking for a way to select a reference object on which the tooltip should be placed »above«.

For context, let’s say I'm working with a map build with a svg. You hover over a country but since the shapes of countries are not useful for placing something on the bounding box I want to manually use a different node. This could be circle with the coordinates of the centroid.

<g v-tooltip="'Country: ' + countryname">
  <path d="…" />
  <circle class="centroid" />
</g>

Is there a way to search within the original reference node for a child to act as a new reference node?