New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

checkShown callback #24

Closed
ismail-codar opened this Issue Apr 15, 2017 · 7 comments

Comments

Projects
None yet
3 participants
@ismail-codar

ismail-codar commented Apr 15, 2017

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 #23 related this.

@atomiks

This comment has been minimized.

Owner

atomiks commented Apr 15, 2017

I see, will definitely add this in for the next release, which will probably be v0.4 with the new Popper release which fixed some bugs. Thanks!

@atomiks

This comment has been minimized.

Owner

atomiks commented Apr 15, 2017

Do you think it's more appropriate to call this callback wait, like:

// In library:
const show = () => this.callbacks.wait ? this.callbacks.wait(_show) : _show()

// Usage:
new Tippy(domNode, {
    wait(show) {
     // Do stuff
     setTimeout(() => {
       // stuff
       show()
     }, 0)
    }
})

or maybe even manual, since you want to control the show of the tooltip... not sure

@ismail-codar

This comment has been minimized.

ismail-codar commented Apr 15, 2017

Same idea but yours looks better 👍 I did not send a pull request because I think you should give the code structure.

@tvkhoa

This comment has been minimized.

tvkhoa commented Apr 16, 2017

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. :)

@atomiks

This comment has been minimized.

Owner

atomiks commented Apr 16, 2017

This is included as wait in v0.4.0 for now (there may be a better solution, but it's there if need be)

@atomiks atomiks closed this Apr 16, 2017

@ismail-codar

This comment has been minimized.

ismail-codar commented Apr 16, 2017

Hi @tvkhoa The following method is not appropriate for me..

<Tooltip
  html={(
    <div>Name: {name}</div>
  )}
>
  <button onClick={changeName}>Change Name</button>
</Tooltip>

Not appropriate because my tooltip content is a large component and available in hundreds of places.
This means this large component renders to html hundreds of times via html={....}. If i use it.
So was my preference is a custom method as mentioned here.

If react-tippy have a working solution similar to following it can be usefull. So tooltip template content must be render on demand.

<div id="my-tooltip-template">Name: {name}</div>
<Tooltip html="my-tooltip-template">
  <button onClick={changeName}>Change Name</button>
</Tooltip>
<Tooltip html="my-tooltip-template">
  <button onClick={changeName}>Change Name</button>
</Tooltip>
@tvkhoa

This comment has been minimized.

tvkhoa commented Apr 23, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment