Skip to content
This repository was archived by the owner on Nov 9, 2024. It is now read-only.
This repository was archived by the owner on Nov 9, 2024. It is now read-only.

Headless Singleton calls render ahead of time #368

Open
@yogev83

Description

@yogev83

Hi, I don't know if it's something that I am doing wrong or maybe it's a bug.

I have a Headless Singleton Tipply:

<Tippy
    singleton={source}
    delay={500}
></Tippy>

 <Tippy singleton={target} placement="bottom" render={(attr, content, inst) => {
       console.log("render", attr, inst);
       return <Bubble>{content}</Bubble>    
 }}>
    <button>Trigger</button>
</Tippy>

The problem is, the render callback is being called immediately when I hover over the trigger element and then again once the delay time is up and the tooltip is actually being mounted.
That behavior prevents me from firing up entering animation on time since the Bubble component is being rendered too early.

I could not find anything in the attr object, or in the inst object that might indicate a "real mounting". It does give me access to "onMount()" and "onShow()" callbacks, but maybe I am not doing it right?...
(I tried: inst.onMount(() => {...}) and also: inst.onMount = () => {...})

Please note that this behavior does not happen on a regular (not singleton) Headless Tippy

Would really appreciate your help. Thanks!


Sandbox link for demo

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions