V5

[danielbarion]

Upgrade Guide in new docs

Installing

npm install react-tooltip@5.0.0-beta.2

or

yarn add react-tooltip@5.0.0-beta.2

Current exported files

Changelog V4 -> V5

Improvements

• Dropped package dependency uuid
• • Using React useId (https://beta.reactjs.org/apis/react/useId)
• • • Unfortunately useId was introduced only into React v18, so, that will be the minimum necessary version of React to V5
• Dropped package dependency prop-types (I'm thinking if we will use prop-types with TS)

V4 props available in V5:

• children -
• place - data-place
• type - Deprecated | in V5 -> variant - data-variant
• effect - not implemented yet, if many users need this feature, we will work on this one.
• offset - data-offset
• padding - Deprecated | in V5 -> can be easy updated by className prop
• multiline - Deprecated | in V5 -> this is already supported as default by content and html props
• border - Deprecated | in V5 -> can be easy updated by className prop
• borderClass - Deprecated | in V5 -> can be easy updated by className prop
• textColor - Deprecated | in V5 -> can be easy updated by className prop
• backgroundColor - Deprecated | in V5 -> can be easy updated by className prop
• borderColor - Deprecated | in V5 -> can be easy updated by className prop
• arrowColor - Deprecated | in V5 -> can be easy updated by className prop
• arrowRadius - Deprecated | in V5 -> can be easy updated by className prop
• tooltipRadius - Deprecated | in V5 -> can be easy updated by className prop
• insecure - Deprecated | in V5 -> CSS will be a separate file and can be imported or not
• className
• id
• html
• delayHide - data-delay-hide
• delayUpdate - Deprecated | if requested, can be implemented later
• delayShow - data-delay-show
• event - not implemented yet, if many users need this feature, we will work on this one.
• eventOff - Deprecated
• isCapture - Deprecated
• globalEventOff - Deprecated
• getContent - Now this attribute only accepts a function instead of any
• afterShow - not implemented yet, if many users need this feature, we will work on this one.
• afterHide - not implemented yet, if many users need this feature, we will work on this one.
• overridePosition - Deprecated
• disable - Deprecated | in V5 -> state can be controlled or uncontrolled
• scrollHide - not implemented yet, if many users need this feature, we will validate if we wrok on this one.
• resizeHide - not implemented yet, if many users need this feature, we will validate if we wrok on this one.
• wrapper - data-wrapper
• bodyMode - Deprecated
• clickable - Deprecated | Supported by default in V5
• disableInternalStyle - Deprecated | in V5 -> CSS will be a separate file and can be imported or not

Break Changes

• All data attributes now has tooltip into his name
• Default Padding changed from padding: 8px 21px; to padding: 8px 16px;
• Exported module now is Tooltip instead of ReactTooltip
• • If you already have a Tooltip component in your application and want to explicitly declare this is ReactTooltip, just import { Tooltip as ReactTooltip } from "react-tooltip"
• CSS import is now optional, so, you can modify and/or add any styling to your floating tooltip element
• data-tip attribute now is data-content
• getContent prop now doesn't accept any anymore, just a function
• default behavior of tooltip now is solid instead of float

New Props

• classNameArrow
• events - data-events -['hover', 'click'] - default: ['hover'] (always an array when using as prop, even with only one option, when using as data attribute: data-events="hover click")
• isOpen - boolean (to control tooltip state) - if not used, internal state of tooltip will handle the show state
• setIsOpen - function (to control tooltip state) - if not used, internal state of tooltip will handle the show state

[danielbarion]

Hi guys, I want to know your thoughts about a thing, as in the current code of V5, we only have 2 elements for tooltip:

• tooltip div
• arrow div

And there are a lot of props related to tooltip customization and arrow customization, like:

• border
• borderClass
• padding
• backgroundColor
• borderColor
• arrowColor
• arrowRadius
• tooltipRadius

And we can override the default styles by simply using CSS in prop className and classNameArrow.

V5 CSS style file: https://github.com/ReactTooltip/react-tooltip/pull/820/files#diff-f3be1842ab0f045e66d70c56d859378687b1522beaced9541d38c307157114df

So, those v4 props sound redundant to me, what does everyone thinks about that?

[aronhelser]

I think you should make it as simple as possible, still keeping the same customization available. So if you are able to make the changes with pure CSS, it is fine to leave these props out - but you will want to make a migration guide + example to show how to change them with CSS in the new version.

It's great you are able to work on this and possibly get to a more react style component with the new version! I'm sure many people are looking forward to it!

[danielbarion]

hey @aronhelser, I'm very happy to have your feedback, thanks!

Yes, sure! I'll update docs and the release notes with the steps and changes after every change :)

[danielbarion]

PR is ready to be reviewed and tested.

Please let me know your thoughts as soon as possible, I planned to release V5 in a few days 🙏🏻

[aronhelser]

It looks great! I don't have particular comments about code style or anything. I see a few typos various places in docs/readme, but I don't think that should hold you up. I haven't worked in typescript in 7 years, so I would defer to someone else there.

+1

[danielbarion]

It looks great! I don't have particular comments about code style or anything. I see a few typos various places in docs/readme, but I don't think that should hold you up. I haven't worked in typescript in 7 years, so I would defer to someone else there.

+1

Thanks :D

oh, the typos are in Grammarly?

Please, do the suggestions, I'm not a native English speaker, but I'm still improving my English hahaha

[danielbarion]

I'll release ReactTooltip V5 tomorrow (December 7), if anyone has anything to say before that, now it's the moment :)

[danielbarion]

All issues related to V4 will be closed.

They are old and the codebase from V4 to V5 is totally different.

[erezcarmel]

Looks great! goodluck to V5!

[danielbarion]

🤞🏻