diff --git a/README.md b/README.md
index f8b90b6f..9cda6c51 100755
--- a/README.md
+++ b/README.md
@@ -20,6 +20,12 @@
If you like the project, please give the project a GitHub 🌟
+---
+
+Why do we show ads on our docs?
+
+- ReactTooltip is an open source project, this is the way we found to be financed by the community.
+
## Demo
[](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
@@ -42,6 +48,8 @@ Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-sta
+---
+
## Installation
```sh
@@ -56,14 +64,6 @@ yarn add react-tooltip
## Usage
-> :warning: ReactTooltip will inject the default styles into the page by default on version `5.13.0` or newer.
-> The `react-tooltip/dist/react-tooltip.css` file is only for style reference and doesn't need to be imported manually anymore if you are already using `v5.13.0` or upper.
-
-> :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features.
-> In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
-
-### Using NPM package
-
1 . Import the CSS file to set default styling.
> :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
@@ -104,59 +104,6 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
```
-#### Using multiple anchor elements
-
-You can also set the `anchorSelect` tooltip prop to use the tooltip with multiple anchor elements without having to set `data-tooltip-id` on each of them.
-`anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
-
-```jsx
-
- ◕‿‿◕
-
-
- ◕‿‿◕
-
-
-```
-
-Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases.
-
-### Standalone
-
-You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into your page. Please make sure that you have already imported `react` and `react-dom` into your page.
-
-mode: `esm` `cjs` `umd`
-
-If you are using a version older than `v5.13.0` don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application. Version `v5.13.0` or newer already inject the default styles into the page by default.
-
-PS: all the files have a minified version and a non-minified version.
-
-
-
-## Options
-
-For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options)
-
-### Security note
-
-The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
-
-#### JSX note
-
-You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
-**Example:**
-
-```jsx
-import ReactDOMServer from 'react-dom/server';
-[...]
-I am JSX content)}
->
- ◕‿‿◕
-
-```
-
## Troubleshooting
Before trying these, make sure you're running the latest ReactTooltip version with
@@ -171,79 +118,11 @@ or
yarn add react-tooltip@latest
```
+Please check our [troubleshooting section](https://react-tooltip.com/docs/troubleshooting) on our docs.
+
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 and only if you are using a version before `5.13.0`, `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 `` on the DOM
-
-This is specially relevant when using components that are conditionally rendered.
-
-Always try to keep the `` 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 `` 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
-
-
-```
-
## Article
[How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
@@ -270,7 +149,7 @@ We would gladly accept a new maintainer to help out!
## Contributing
-We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](contributing.md) doc has some details.
+We welcome your contribution! Fork the repo, make some changes, submit a pull-request! Our [contributing](CONTRIBUTION.md) doc has some details.
## License
diff --git a/docs/docs/examples/html.mdx b/docs/docs/examples/html.mdx
index 783a7b24..53b3f8d8 100644
--- a/docs/docs/examples/html.mdx
+++ b/docs/docs/examples/html.mdx
@@ -84,3 +84,25 @@ import { Tooltip } from 'react-tooltip';
id="my-tooltip-html-prop"
html="Hello multiline HTML tooltip"
/>
+
+#### Security note
+
+The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user.
+Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html).
+We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.
+
+#### JSX note
+
+You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
+**Example:**
+
+```jsx
+import ReactDOMServer from 'react-dom/server';
+[...]
+I am JSX content)}
+>
+ ◕‿‿◕
+
+```
diff --git a/docs/docs/troubleshooting.mdx b/docs/docs/troubleshooting.mdx
index e320ee23..08ac2de8 100644
--- a/docs/docs/troubleshooting.mdx
+++ b/docs/docs/troubleshooting.mdx
@@ -71,6 +71,37 @@ 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.
+## Next.js `"use client"` error
+
+This normally happens when you use `react-tooltip` inside a component that is not tagged as client component. For more info, see the [Next.js docs](https://nextjs.org/docs/getting-started/react-essentials#client-components).
+
+To use `react-tooltip` on Next.js 13 without having to tag your component or page as a client component, just create a new file `ReactTooltip.tsx` (for this example, the file path is `src/components/ReactTooltip.tsx`) and place the following code inside of the created file:
+
+:::caution
+
+Avoid naming the file `react-tooltip.tsx` (or with whichever extension your project uses), since it may interfere with your editor's autocomplete funcionality.
+
+:::
+
+```jsx
+// src/components/ReactTooltip.tsx
+'use client'
+
+export * from 'react-tooltip'
+```
+
+And in the place that you are importing React Tooltip:
+
+```jsx
+// ❌ Old
+import { Tooltip } from 'react-tooltip'
+```
+
+```jsx
+// ✅ New
+import { Tooltip } from 'components/react-tooltip'
+```
+
## 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.
diff --git a/rollup.config.prod.js b/rollup.config.prod.js
index 733b3854..2157a06f 100644
--- a/rollup.config.prod.js
+++ b/rollup.config.prod.js
@@ -19,9 +19,7 @@ const banner = `
* {@link https://github.com/ReactTooltip/react-tooltip}
* @copyright ReactTooltip Team
* @license MIT
-*/
-
-'use client';` // this 'use client' prevent break Next.js 13 projects when using tooltip on server side components
+*/`
const external = [
...Object.keys(pkg.peerDependencies ?? {}),