docs: improve usage guide for default css styling

Author: gabrieljablonski

README.md

@@ -47,7 +47,15 @@ yarn add react-tooltip
 
 ### Using NPM
 
-1 . Require react-tooltip after installation
+1 . Import the CSS file to set default styling
+
+```js
+import 'react-tooltip/dist/react-tooltip.css'
+```
+
+This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
+
+2 . Import `react-tooltip` after installation
 
 ```js
 import { Tooltip } from 'react-tooltip'
@@ -59,15 +67,15 @@ or if you want to still use the name ReactTooltip as V4:
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 ```
 
-2 . Add `data-tooltip-content="your placeholder"` to your element
+3 . Add `data-tooltip-content="your placeholder"` to your element
 
 ```jsx
 <p id="my-element" data-tooltip-content="hello world">
   Tooltip
 </p>
 ```
 
-3 . Include react-tooltip component
+4 . Include react-tooltip component
 
 ```jsx
 <ReactTooltip anchorId="my-element" />

docs/docs/examples/styling.mdx

@@ -365,7 +365,7 @@ import 'react-tooltip/dist/react-tooltip.css'
 
 #### Observation
 
-This doc is only if you are importing `import 'react-tooltip/dist/react-tooltip.css'`, if not, you can write your classes by you directly.
+This doc is only if you are importing `import 'react-tooltip/dist/react-tooltip.css'`. If not, you can write your own CSS classes directly.
 
 With CSS specificity everything can be overridden if you know what are you doing.
 

docs/docs/getting-started.mdx

@@ -49,6 +49,15 @@ yarn add react-tooltip
 
 ## Usage
 
+### Set the default styling
+
+```js
+import 'react-tooltip/dist/react-tooltip.css'
+```
+
+This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
+For advanced styling, check [the examples](./examples/styling.mdx).
+
 There are two ways to use ReactTooltip.
 
 1. Using props into ReactTooltip Element.
@@ -124,9 +133,8 @@ By default, you can't interact with elements inside the tooltip. To allow for pr
 
 ### Styling
 
-If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css'`.
-
 Basic styling can be done by overriding the following css variables.
+For advanced styling, check [the examples](./examples/styling.mdx).
 
 ```css
 :root {
@@ -139,5 +147,3 @@ Basic styling can be done by overriding the following css variables.
   --rt-opacity: 0.9;
 }
 ```
-
-For advanced styling, check [the examples](./examples/styling.mdx).