Popper-core: Question: can I change reference element at runtime?

[MOZGIII]

Hi. Can I change reference element at runtime?

My usecase is I have an SVG map, rendered with d3. I want to implement tooltips with information about user sees on the map, and show them when user hovers a particular svg path. I figured that I'd rather change reference element from mouse over / mouse out events rather than create a popper.js instance for every path (there are a lot).

[atomiks]

https://codepen.io/anon/pen/eVNaJv

Set reference to the new element, then call Popper#update?

[MOZGIII]

That looks good. I expected there to be some underlying state to clean up, but seems like it's either not required, or already covered by update().
I'll try this solution.

Can I detach tooltip (to hide it) by assigning null to reference?

[MOZGIII]

Turns out I can, however I can't pass to the constructor. I solved it by using document.documentElement:

new Popper(document.documentElement, this.tooltipEl)

[cihad]

Is it possible on version 2? I want to change popper instance's reference element.

[cihad]

Yes it is possible:

popperInstance.state.elements.reference = newReferenceDom
popperInstance.update()

https://codepen.io/cihad/pen/yLNpveX

Is it possible on version 2? I want to change popper instance's reference element.

[atomiks]

@cihad please note that scrollParents detection is done on create/update, so if the reference is is inside a different scrolling container that will cause problems. I recommend destroying the previous instance and creating a new one instead in that case. For performance optimization then dynamically setting it as you're doing it is fine.