tippyjs-react icon indicating copy to clipboard operation
tippyjs-react copied to clipboard

Headless Singleton calls render ahead of time

Open yogev83 opened this issue 3 years ago • 0 comments

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

yogev83 avatar Sep 23 '22 02:09 yogev83