Changelog V4 -> V5
If you are using V4 and want to upgrade to V5, you can see what changed below.
From V4 to V5
V4 was a great react tooltip component but was built a while ago using React class components, whick makes it hard to maintain, and for the community give contributions.
With this in mind, we built a new version of ReactTooltip using floating-ui behind the scenes. This resulted in a great improvement in performance, and made it easier for the community to contribute to the project.
Improvements
- Dropped package dependency
uuid
- Dropped package dependency
prop-types
- V5 is written in TypeScript
- V5 has minified and unminified files available to be used as you want
Breaking Changes
- All data attributes are now prefixed with
data-tooltip-
- Default Padding changed from
padding: 8px 21px;
topadding: 8px 16px;
- Exported module now is
Tooltip
instead ofReactTooltip
- If you already have a
Tooltip
component in your application and want to explicitly declare this asReactTooltip
, justimport { Tooltip as ReactTooltip } from "react-tooltip"
data-for
attribute now isdata-tooltip-id
data-tip
attribute now isdata-tooltip-content
getContent
prop was removed. Instead, you can directly pass dynamic content to thecontent
tooltip prop, or todata-tooltip-content
in the anchor element, or use the newrender
tooltip prop- Default behavior of tooltip now is equivalent to V4's
solid
effect, instead offloat
. The newfloat
prop can be set to achieve V4'seffect="float"
. See Options for more details
What about ReactTooltip.rebuild()
?
A common question V4 users have when upgrading to V5 is about ReactTooltip.rebuild()
.
Rebuilding the tooltip was a required step when using V4 with dynamic content. It isn't necessary when using V5.
The tooltip component now automatically watches for any changes made to the DOM and updates accordingly, without any extra steps needed.
If you run into any problems with the tooltip not updating after changes are made in other components, please open a GitHub issue reporting what you find, ideally with a sample CodeSandbox (or something similar) to help us pinpoint the problem.
New Props
-
classNameArrow
-
openOnClick
-boolean
- when set, the tooltip will open on click instead of on hover -
isOpen
-boolean
(to control tooltip state) - if not used, tooltip state will be handled internally -
setIsOpen
-function
(to control tooltip state) - if not used, tooltip state will be handled internally -
position
-{ x: number; y: number }
- similar to V4'soverridePosition
-
float
-boolean
- used to achieve V4'seffect="float"
-
hidden
-boolean
- when set, the tooltip will not show -
render
-function
- can be used to render dynamic content based on the active anchor element (check the examples for more details) -
closeOnEsc
- DEPRECATED -boolean
- when set, the tooltip will close after pressing the escape key -
closeOnScroll
- DEPRECATED -boolean
- when set, the tooltip will close when scrolling (similar to V4'sscrollHide
) -
closeOnResize
- DEPRECATED -boolean
- when set, the tooltip will close when resizing the window (same as V4'sresizeHide
)
Use globalCloseEvents
instead of closeOnEsc
, closeOnScroll
, and closeOnResize
. See the options page for more details.
V4
props available in V5
-
children
-
place
- also available on anchor element asdata-tooltip-place
-
type
- usevariant
. also available on anchor element asdata-tooltip-variant
-
effect
- usefloat
prop -
offset
- also available on anchor element asdata-tooltip-offset
-
padding
- useclassName
and custom CSS -
multiline
- supported by default incontent
andhtml
props -
border
-
borderClass
- useborder
prop -
textColor
- useclassName
and custom CSS -
backgroundColor
- useclassName
and custom CSS -
borderColor
- useborder
prop -
arrowColor
-
arrowRadius
- useclassName
and custom CSS -
tooltipRadius
- useclassName
and custom CSS -
insecure
-
className
-
id
-
html
-
delayHide
- also available on anchor element asdata-delay-hide
-
delayUpdate
- can be implemented if requested -
delayShow
- also available on anchor element asdata-delay-show
-
event
- functionality changed and renamed toopenEvents
-
eventOff
- functionality changed and renamed tocloseEvents
-
isCapture
-
globalEventOff
- functionality changed and renamed toglobalCloseEvents
-
getContent
- pass dynamic values tocontent
instead -
afterShow
-
afterHide
-
overridePosition
- useposition
-
disable
-
scrollHide
- renamed tocloseOnScroll
-
resizeHide
- renamed tocloseOnResize
-
wrapper
- also available on anchor element asdata-tooltip-wrapper
-
bodyMode
-
clickable
-
disableInternalStyle
- renamed todisableStyleInjection
Detailed informations
Check all V5 options here.