Mobile positioning breaks on scroll

[wrabit]

When using on mobile, the tooltip displays correctly initially, but once you scroll it is positioned fixed to the top left of the screen.

Initial:

After and during any scrolling:

It's been initiated by alpine.js:

<div x-ref="tippy" x-init="init()" x-data="{
    init() {
        tippy($el, {
            content: $el.querySelector('[data-tippy-content]').innerHTML,
            allowHTML: true,
            delay: 200
        })
    },
}">
    <x-icons.check-circle />

    <div data-tippy-content style="display: none;">
        This is the tooltop body
    </div>
</div>

Is there any common pitfalls that anyone knows of to look at?

TIA

[atomiks]

That might mean the reference element it was attached to no longer exists on the DOM (or got replaced by a cloned element or such), you can log out the instance and see if instance.reference is on the page

[wrabit]

It's probably because the parent is re-rendered on update, I have tried setting appendTo: () => document.body is not fixing it.

In my use case, where the tooltip is also a link to perform an action, it would be preferential to disable the tooltip for taps / all mobile. Is there an API-way to carry this out? Thanks again in advance

[atomiks]

touch: false will disable for taps

It's probably because the parent is re-rendered on update, I have tried setting appendTo: () => document.body is not fixing it.

The rendering engine being used shouldn't be throwing away the old element, it should be diffing the attributes etc. You probably need to recreate the instance on each render

[atomiks]

Repro needed for further investigation.

[EtiennePASSOT]

@atomiks You're the best