Tippyjs: followCursor not working with show/hide or trigger: manual [5.0.1]

[rockerBOO]

Bug description

followCursordoes not work with show()/hide() or trigger: manual.

If you show/hide an instance with followCursor on, it will not show/hide it. If you set the trigger to be manual, it won't follow the cursor.

Reproduction

CodePen link: https://codepen.io/rockerboo/pen/rNNaxbw

[KubaJastrz]

Not sure what is the expected behavior here. With trigger: manual tooltip is shown before user hovers over the target element so it needs to follow the placement prop.

Do you want to display the tooltip in a default placement and then switch to followCursor mode once the cursor is above the target?

[atomiks]

Doesn't seem like this ever worked before? in v4 either

[rockerBOO]

My goal is I want to add Tippy to my cursor when events trigger elsewhere. I want to control when the Tippy tooltip is activated, but also to follow my cursor.

const tippyInstance = tippy(document.body, { followCursor: true, trigger: 'manual' })
on('mouseover', () => tippyInstance.show())
on('mouseout', () => tippyInstance.hide())

I thought this was working in v4 but I was actually re-creating the tippy instance on hover.

let tippyInstance = null
on('mouseover', () => tippyInstance = tippy(document.body, {    
  showOnInit: true,
  trigger: 'manual',
  content: 'SAMPLE', 
  followCursor: true,
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      inner: { enabled: false }
    }
  },
  placement: 'right',
  interactiveBorder: 5,
  animation: 'shift-toward',
  delay: [0, 300]
 }))
on('mouseout', () => tippyInstance.destroy())

If this is not an intended goal of this project I can use another tool for my cursor tooltips.

[rockerBOO]

Showing how I want it to work. https://streamable.com/cq6qb

[atomiks]

I'm not sure I fully understand the streamable vid. You could achieve that by selecting each of the green circle nodes and setting followCursor: true and it should work as you've shown.

[rockerBOO]

The green circles are not actual elements. They are drawn elements on a <canvas>. Another tool manages hit detection which gives me mouseover and mouseout events.

const canvas = new Canvas()

canvas.on('mouseover', () => {})
canvas.on('mouseout', () => {})

[atomiks]

Interesting... Popper.js uses DOM nodes, and not sure if it could measure canvas objects.

Of course, you aren't using that but instead followCursor which uses a virtual element and is able to work on the canvas this way.

This should be possible to fix, as the followCursor plugin hooks into the onTrigger lifecycle (which .show() bypasses, so it doesn't work). Feel free to propose a PR and I'll merge