Troubleshooting
Some tips on how to solve common issues with ReactTooltip.
Before trying these, make sure you're running the latest ReactTooltip version with
npm install [email protected]
or
yarn add [email protected]
If you can't find your problem here, make sure there isn't an open issue on GitHub already covering it. If there isn't, feel free to submit a new issue here.
The tooltip is broken/not showing up
Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before 5.13.0
, App.jsx
/App.tsx
is usually a good place to do it.
import 'react-tooltip/dist/react-tooltip.css'
If you've imported the default styling and the tooltip is still not showing up when you hover on your anchor element, make sure you have content to be displayed by the tooltip.
If data-tooltip-content
and data-tooltip-html
are both unset (or they have empty values) on the anchor element, and also the content
, render
, and children
props on the tooltip are unset (or have empty values), the tooltip is not shown by default.
Next.js TypeError: f is not a function
This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
The best way to solve this is to upgrade to [email protected]
or later versions.
Less ideally, if you're unable to upgrade, you can set swcMinify: false
on your next.config.js
file.
Bad performance
If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.
Move <Tooltip />
on the DOM
This is specially relevant when using components that are conditionally rendered.
Always try to keep the <Tooltip />
component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.
We usually recommend placing the tooltip component directly inside the root component of your application (usually on App.jsx
/App.tsx
).
Dynamically generated anchor elements
You should avoid needlessly using a large amount of <Tooltip />
components. One tooltip component that you use across your whole application should be good enough in most cases, but you should be fine to add a few more if you need to use different styled tooltips.
Here's a simple example on how to improve performance when using dynamically generated items.
Check the examples for the anchorSelect
and render
props for more complex use cases.
// ❌ BAD
<div className="items-container">
{myItems.map(({ id, content, tooltip }) => (
<div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
{content}
<Tooltip id={`tooltip-${id}`} content={tooltip} />
</div>
))}
</div>
// ✅ GOOD
<div className="items-container">
{
myItems.map(({ id, content, tooltip }) => (
<div
key={id}
className="item"
data-tooltip-id="my-tooltip"
data-tooltip-content={tooltip}
>
{content}
</div>
))
}
</div>
<Tooltip id="my-tooltip" />