Tippy appears from top-left corner of screen

[inderpal-3pillarglobal]

Hi,
I upgraded to tippy 6, and here is the config I am using with it...
The tippy tooltip appears (slides in) from the top-left corner of the screen and then transitions to the point of hover (the element).

The expected behavior should be that it appears directly at the point of hovering on the element.
Here is the config I am using:

    private readonly tippySingletonOptions: Partial<CreateSingletonProps> = {
        // we want tippy instance to be outputted in body and not in deep hierarchy.
        appendTo: document.body,
        arrow: true,
        animation: "perspective",
        theme: 'light-border',
        allowHTML: true,
        delay: 200,
        moveTransition: 'transform 0.2s ease-out',
        // the properties mentioned here will get picked from original tippy instance and not from singleton!
        overrides: ['placement', 'maxWidth', 'interactive', 'popperOptions'],
    }

Is there anything I am missing? my hunch is that it's a side-effect of move transition, i.e. it is transitioning from 0,0 to the point of hover of the element.

[atomiks]

If you wrap this line in requestAnimationFrame, does the problem go away?

tippyjs/src/createTippy.ts

Line 988 in ad85f6f

popper.style.transition = instance.props.moveTransition;

requestAnimationFrame(() => {
   popper.style.transition = instance.props.moveTransition; 
});

[atomiks]

I meant if you edit your node_modules file to see if it's a bug with the lib itself. But if you remove moveTransition, and add it manually like you did there that could also be telling.

singleton.popper should point to it

[inderpal-3pillarglobal]

I tried wrapping popper.style.transition = instance.props.moveTransition; as you suggested in requestAnimationFrame in node module, looks like that didn't help.

I also tried removing the moveTransition from props and adding it later after the singleton is created, in this case, the transition effect doesn't get applied.

private readonly tippySingletonOptions: Partial<CreateSingletonProps> = {
	// we want tippy instance to be outputted in body and not in deep hierarchy.
	appendTo: document.body,
	arrow: true,
	animation: "perspective",
	theme: 'light-border',
	allowHTML: true,
	delay: 200,
	// moveTransition: 'transform 0.2s ease-out',
	// the properties mentioned here will get picked from original tippy instance and not from singleton!
	overrides: ['placement', 'maxWidth', 'interactive', 'popperOptions'],
}

const singleton = createSingleton(
	Object.values(this.instanceCache[singletonName]), this.tippySingletonOptions
)

requestAnimationFrame(() => {
	singleton.popper.style.transition = 'transform 0.2s ease-out';
})

Few more observations:

• when hovering for the first time, you can see the tippy coming from the top-left.
• when moving between elements of the same singleton, sometimes the tippy instead of moving from x to y, again comes from top-left 0,0.

[atomiks]

try putting it onMount() instead of on create, as that won't change anything (actually causes a diff issue)

createSingleton(x, {
  onMount({popper}) {
    requestAnimationFrame(() => {
      popper.style.transition = 'transform 0.2s ease-out';
    )};
  },
  onHidden({popper}) {
   popper.style.transition = '';
  }
});

[inderpal-3pillarglobal]

Hi @atomiks

This did fix the first issue, i.e. Tippy appearing from the top-left of screen when the first time an element is hovered in a singleton".

But the second issue, "when moving between elements of the same singleton, sometimes the tippy instead of moving from x to y, again comes from top-left 0,0." is not fixed.
But, adding the above-suggested code did change the issue a little bit, instead of tippy coming from the top-left corner of the screen now coming from the bottom-left corner.

Do note, that this is only when we are moving from one element to another of the same singleton.

[inderpal-3pillarglobal]

@atomiks I am looking for a fix for the above-mentioned issue. Any inputs from your end?