checkShown callback

I am using react with tippyjs. My tooltip content is hardly dynamic and interactive. User selecting components and editing it in tooltip. In my scenario tooltip must be show after tooltip content is rendered. My solution is https://github.com/ismail-codar/tippyjs/blob/master/src/js/tippy.js#L478

Usage:

new Tippy(domNode, {
        interactive: true,
        checkShown: (callback) => {
            const tooltipDom: HTMLElement = popup.getPopperElement(popup.tooltippedEls[0]).querySelector(".tippy-tooltip-content");
            //change model for react rendering 
            // ... some codes
            // ... some codes
            setTimeout(() => {
            //and react rendered here refresh tooltip content and call callback for tooltip showing
                if (tooltipDom.firstChild)
                   tooltipDom.firstChild.remove()
                tooltipDom.appendChild(activeTooltip.tooltipDomNode)
                callback()
            }, 0)
        }
    })

If @atomiks can be implement any solution like this integration with react like libraries is will be easy.

And another benefit is client side authority control etc can be done before tooltip open. I think https://github.com/atomiks/tippyjs/issues/23 related this.

[tvkhoa]

Hi @ismail-codar, I found a better solution for dynamic and interactive tooltip. Could you please check https://github.com/tvkhoa/react-tippy for that ? (disabled and html props)

Btw, @atomiks Thanks for your beautiful tooltip project. I port it to React component so that react user can use it conveniently. 😃

[tvkhoa]

Hi @ismail-codar , I miss the notification so sorry for the late response. You can pass the react element to html prop. It’s sth like that

const TooltipContent = ({ name }) => (
  <div>
    <p>Name: {name}</p>
    ...
  </div>
);
...
<Tooltip html={<TooltipContent name={name} />}>
  <button onClick={changeName}>Change Name</button>
</Tooltip>

I think your current solution in React is an error-prone. Example: you can not pass the event like onChange or onClick to your tooltip content.