react-tooltip 5.10.6-beta.1009.1 → 5.11.0

package/README.md

@@ -153,6 +153,99 @@ import ReactDOMServer from 'react-dom/server';
 </a>
 ```
 
+## Troubleshooting
+
+Before trying these, make sure you're running the latest ReactTooltip version with
+
+```sh
+npm install react-tooltip@latest
+```
+
+or
+
+```sh
+yarn add react-tooltip@latest
+```
+
+If you can't find your problem here, make sure there isn't [an open issue](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
+If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
+
+### 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, `App.jsx`/`App.tsx` is usually a good place to do it.
+
+```jsx
+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 `next@13.3.0` 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`). You can also move the `import 'react-tooltip/dist/react-tooltip.css'` there.
+
+#### 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 docs for examples for the [`anchorSelect`](https://react-tooltip.com/docs/examples/anchor-select) and [`render`](https://react-tooltip.com/docs/examples/render) props for more complex use cases.
+
+```jsx
+// ❌ 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>
+```
+
+```jsx
+// ✅ 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" />
+```
+
 ## Article
 
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "5.10.6-beta.1009.1",
+  "version": "5.11.0",
   "description": "react tooltip component",
   "scripts": {
     "dev-rollup": "node ./prebuild.js --env=development && node --max_old_space_size=2048 ./node_modules/rollup/dist/bin/rollup -c rollup.config.dev.js --watch",