checkShown callback about tippyjs HOT 7 CLOSED

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

from tippyjs.

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!

from tippyjs.

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

from tippyjs.

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

from tippyjs.

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

from tippyjs.

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>

from tippyjs.

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.

from tippyjs.