How to position in the mouse click?

I finally managed to position using pure popper a div inside a SVG. I wish to do the same with tippy

I’m trying the following approach which does not work:

  select(e: MouseEvent) {
    const ref = {
      getBoundingClientRect() {
        return {
          width: e.layerY,
          height: e.layerX,
          top: e.layerY,
          left: e.layerX,
          right: 0,
          bottom: 0
        }
      },
      clientHeight: 100,
      clientWidth: 100
    }

    tippy('.line', {
      target: 'polyline',
      trigger: 'click',
      arrow: true
    }, ref);
  }

This worked with popper:

  select(e: MouseEvent) {
    const ref = {
      getBoundingClientRect: () => ({
        top: e.layerY,
        right: e.layerX,
        bottom: e.layerY,
        left: e.layerX,
        width: 0,
        height: 0,
      }),
      clientWidth: 0,
      clientHeight: 0,
    }
    
    const pop = document.getElementById('template'); // the popup element

    this.popper = new Popper(ref, pop);    
  } 

What am I missing?

[atomiks]

Yeah, you need to use the object as the actual reference itself.

But I see that you want to use the line as the reference for tippy to handle listeners for, but want a custom position where they clicked… that’s a really valid use case that hasn’t been added yet 😢 .

[atomiks]

This was fixed in Dec 2018 🤔