Skip to content

Commit cbd7669

Browse files
docs: "broken tooltip" troubleshooting
1 parent 9b1acdf commit cbd7669

File tree

2 files changed

+24
-0
lines changed

2 files changed

+24
-0
lines changed

README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,18 @@ yarn add react-tooltip@latest
170170
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.
171171
If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
172172

173+
### The tooltip is broken/not showing up
174+
175+
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.
176+
177+
```jsx
178+
import 'react-tooltip/dist/react-tooltip.css'
179+
```
180+
181+
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.
182+
183+
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.
184+
173185
### Next.js `TypeError: f is not a function`
174186

175187
This problem seems to be caused by a bug related to the SWC bundler used by Next.js.

docs/docs/troubleshooting.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,18 @@ yarn add react-tooltip@latest
5353
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.
5454
If there isn't, feel free to [submit a new issue here](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
5555

56+
## The tooltip is broken/not showing up
57+
58+
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.
59+
60+
```jsx
61+
import 'react-tooltip/dist/react-tooltip.css'
62+
```
63+
64+
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.
65+
66+
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.
67+
5668
## Next.js `TypeError: f is not a function`
5769

5870
This problem seems to be caused by a bug related to the SWC bundler used by Next.js.

0 commit comments

Comments
 (0)