docs: troubleshooting page

Author: gabrieljablonski

docs/docs/troubleshooting.mdx

@@ -0,0 +1,113 @@
+---
+sidebar_position: 4
+---
+
+# Troubleshooting
+
+Some tips on how to solve common issues with ReactTooltip.
+
+import { Tooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+export const TooltipAnchor = ({ children, id, ...rest }) => {
+  return (
+    <span
+      id={id}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        margin: 'auto',
+        alignItems: 'center',
+        width: '60px',
+        height: '60px',
+        borderRadius: '60px',
+        color: '#222',
+        background: 'rgba(255, 255, 255, 1)',
+        cursor: 'pointer',
+        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
+        border: '1px solid #333',
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  )
+}
+
+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 on GitHub](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
+If there isn't, feel free to [submit a new issue here](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
+
+## 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 examples for the [`anchorSelect`](./examples/anchor-select) and [`render`](./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" />
+```