You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -42,6 +48,8 @@ Documentation for V5 - [ReactTooltip](https://react-tooltip.com/docs/getting-sta
42
48
</a>
43
49
</p>
44
50
51
+
---
52
+
45
53
## Installation
46
54
47
55
```sh
@@ -56,14 +64,6 @@ yarn add react-tooltip
56
64
57
65
## Usage
58
66
59
-
> :warning: ReactTooltip will inject the default styles into the page by default on version `5.13.0` or newer.
60
-
> 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.
61
-
62
-
> :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.
63
-
> 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.
64
-
65
-
### Using NPM package
66
-
67
67
1 . Import the CSS file to set default styling.
68
68
69
69
> :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'
104
104
<Tooltip id="my-tooltip"/>
105
105
```
106
106
107
-
#### Using multiple anchor elements
108
-
109
-
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.
110
-
`anchorSelect` must be a valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
<a className="my-anchor-element" data-tooltip-content="Hello to you too!">
117
-
◕‿‿◕
118
-
</a>
119
-
<Tooltip anchorSelect=".my-anchor-element"/>
120
-
```
121
-
122
-
Check [the V5 docs](https://react-tooltip.com/docs/getting-started) for more complex use cases.
123
-
124
-
### Standalone
125
-
126
-
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.
127
-
128
-
mode: `esm``cjs``umd`
129
-
130
-
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.
131
-
132
-
PS: all the files have a minified version and a non-minified version.
For all available options, please check [React Tooltip Options](https://react-tooltip.com/docs/options)
139
-
140
-
### Security note
141
-
142
-
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.
143
-
144
-
#### JSX note
145
-
146
-
You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
147
-
**Example:**
148
-
149
-
```jsx
150
-
importReactDOMServerfrom'react-dom/server';
151
-
[...]
152
-
<a
153
-
data-tooltip-id="my-tooltip"
154
-
data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
155
-
>
156
-
◕‿‿◕
157
-
</a>
158
-
```
159
-
160
107
## Troubleshooting
161
108
162
109
Before trying these, make sure you're running the latest ReactTooltip version with
@@ -171,79 +118,11 @@ or
171
118
yarn add react-tooltip@latest
172
119
```
173
120
121
+
Please check our [troubleshooting section](https://react-tooltip.com/docs/troubleshooting) on our docs.
122
+
174
123
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.
175
124
If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
176
125
177
-
### The tooltip is broken/not showing up
178
-
179
-
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.
180
-
181
-
```jsx
182
-
import'react-tooltip/dist/react-tooltip.css'
183
-
```
184
-
185
-
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.
186
-
187
-
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.
188
-
189
-
### Next.js `TypeError: f is not a function`
190
-
191
-
This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
192
-
The best way to solve this is to upgrade to `next@13.3.0` or later versions.
193
-
194
-
Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
195
-
196
-
### Bad performance
197
-
198
-
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.
199
-
200
-
#### Move `<Tooltip />` on the DOM
201
-
202
-
This is specially relevant when using components that are conditionally rendered.
203
-
204
-
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.
205
-
206
-
We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).
207
-
208
-
#### Dynamically generated anchor elements
209
-
210
-
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.
211
-
212
-
Here's a simple example on how to improve performance when using dynamically generated items.
213
-
214
-
> 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.
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.
91
+
Any user-supplied content must be sanitized, using a package like [sanitize-html](https://www.npmjs.com/package/sanitize-html).
92
+
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.
93
+
94
+
#### JSX note
95
+
96
+
You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) to use JSX instead of HTML.
97
+
**Example:**
98
+
99
+
```jsx
100
+
importReactDOMServerfrom'react-dom/server';
101
+
[...]
102
+
<a
103
+
data-tooltip-id="my-tooltip"
104
+
data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
Copy file name to clipboardExpand all lines: docs/docs/troubleshooting.mdx
+31Lines changed: 31 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -71,6 +71,37 @@ The best way to solve this is to upgrade to `next@13.3.0` or later versions.
71
71
72
72
Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
73
73
74
+
## Next.js `"use client"` error
75
+
76
+
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).
77
+
78
+
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:
79
+
80
+
:::caution
81
+
82
+
Avoid naming the file `react-tooltip.tsx` (or with whichever extension your project uses), since it may interfere with your editor's autocomplete funcionality.
83
+
84
+
:::
85
+
86
+
```jsx
87
+
// src/components/ReactTooltip.tsx
88
+
'use client'
89
+
90
+
export*from'react-tooltip'
91
+
```
92
+
93
+
And in the place that you are importing React Tooltip:
94
+
95
+
```jsx
96
+
// ❌ Old
97
+
import { Tooltip } from'react-tooltip'
98
+
```
99
+
100
+
```jsx
101
+
// ✅ New
102
+
import { Tooltip } from'components/react-tooltip'
103
+
```
104
+
74
105
## Bad performance
75
106
76
107
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.
0 commit comments