Discuss API v4

[slmgc]

As I am slooooooowly working on the next API, I guess it makes sense to gather all the feedback and ideas, and feature requests before it gets cut in stone. I am going to write down some of my thoughts about the new API and show what I have in mind.

Folks, if you have major pain points with the current API, I would like to know about them and discuss what could be improved.

[slmgc]

These are the main points I would like to cover in the new API:

• 1. Add support for any events including custom ones.
• 2. Make it convenient to programmatically toggle a tooltip, e.g. via click or custom events.
• 3. If possible, make it CSS modules-friendly.
• 4. Add a way to introduce a custom logic to decide if the tooltip needs to be shown or hidden.
• 5. Introduce a way to completely customize the look and feel of a tooltip via custom render method.
• 6. Switch from using data-attributes to CSS selectors for triggering tooltip events.
• 7. Make it animation-friendly by introducing tooltip animation states.
• 8. If possible, make it compatible with Vue.

[drosko]

Regarding the 'show tooltip on disabled buttons', it would be most convenient to just have a prop or attribute to flag whether you want the tooltip to still show if it's disabled.

[slmgc]

@drosko I guess it's doable with the current API, something like this:

    <button
        disabled={this.state.disabled}
        data-rh={this.state.disabled ? undefined : 'a tooltip'}
    />

[srmagura]

I was going to say that it would be nice if React Hint let you display a custom tooltip by suppling a JSX element or render prop like

<button data-rh={<span>My <b>tooltip</b></span>} />  
// OR
<button data-rh={() => <span>My <b>tooltip</b></span>} />

This would be "better" than ReactHint's onRenderContent since you can supply different tooltip JSX for each element.

But since data attributes can only have string values this doesn't seem possible. Seems like using Popper.js directly is the still the best option for this use case.

[slmgc]

@srmagura The difference here is that Popper.js creates an instance per tooltip, thus having hundreds of elements on the page might slow things down. React-hint was created to avoid such situations. It might seem to be inconvenient at first, but this approach allows to have both: performance AND versatility.